Good Day,
I just started to learn HTML5 – have no issues, everything’s going perfectly.
I have only one, small question about semantic usage of <article>, <section> and <div> tags.
I know that <div> element has no semantic meaning – in HTML5 it should be used mainly for scripting/styling purposes. Here everything is clear for me. I found a lot of useful informations in SO question: HTML5 has new tags article, section and aside. When should I use div tag?.
However, I have some issues with <article> and <section> usage. W3C HTML5 specification says that <article> tag
Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site.
where <section> tag should be used
For a section in a document. Such as chapters, headers, footers, or any other sections of the document.
In theory, everything’s clear. However, while preparing the code for my first HTML5 website I found it a bit hard to differ.
Let me explain my website structure:
- Backgrounds are added to the body element. Working perfectly.
- I use 960.gs grid system in my every HTML/CSS project. This time I’m using it too. As you surely know, it requires a container to be added (with a class: container_12 in my case).
To conclude explanation of my structure:
- As a main container, I’ve used
<div class="container_12"> - The first element in my document is a
<header>. It contains few elements: slider and top bar. The top bar is a<section>. It has two child elements: telephone number on the left and language list on the right. For those elements, I have used<section>too. For a slider (or a short slogan placeholder on inner pages) I’ve used<section>tag which contains two<section>tags: left and right column. - As a main content wrapper for homepage I’ve decided to use
<section>element. For inner pages I’m using<article>for pages like About Us, etc. For blogs list, I’m using a<section>with a list of<article>tags inside. For a single post, I’m using<article>element. - Obviously, for a footer, I’m using
<footer>element with three<section>elements as a column wrappers.
My layout before convertion to HTML5:
<div class="container_12">
<div class="grid_12 header">
<div class="bar grid_12 alpha omega">
<div class="grid_6 alpha">
Phone number
</div>
<div class="grid_6 omega">
German - English - French
</div>
</div>
<div class="grid_6 alpha">
LOGOTYPE
</div>
<div class="grid_6 omega">
<ul>
navigation
</ul>
</div>
<div class="grid_12 alpha omega">
<div class="grid_6 alpha">
Slider I col
</div>
<div class="grid_6 omega">
Slider II col
</div>
</div>
</div>
<div class="grid_12 content">
</div>
<div class="grid_12 footer">
<div class="grid_4 alpha">
Footer I col
</div>
<div class="grid_4">
Footer II col
</div>
<div class="grid_4 omega">
Footer III col
</div>
</div>
</div>
Here’s my code after converting it to HTML5:
<div class="container_12">
<header class="grid_12">
<section class="bar grid_12 alpha omega">
<section class="grid_6 alpha">
Phone number
</section>
<section class="grid_6 omega">
German - English - French
</section>
</section>
<section class="grid_6 alpha">
LOGOTYPE
</section>
<nav class="grid_6 omega">
<ul>
navigation
</ul>
</nav>
<section class="grid_12 alpha omega">
<section class="grid_6 alpha">
Slider I col
</section>
<section class="grid_6 omega">
Slider II col
</section>
</section>
</header>
<section class="grid_12 content">
</section>
<footer class="grid_12">
<section class="grid_4 alpha">
Footer I col
</section>
<section class="grid_4">
Footer II col
</section>
<section class="grid_4 omega">
Footer III col
</section>
</footer>
</div>
Is my approach correct? Could you add or correct something?
To avoid any questions: I know that <section> is not a replacement for a <div>.
Well, one way to answer this is to have a look at the outline of the document using a tool like http://gsnedders.html5.org/outliner/. You’ll notice that each section needs a heading to make sense, so without some content it’s hard to say. If each section has a H! tag that makes sense, then it’s usually right. If a section doesn’t need a h1 then it’s usually wrong.
Sections should make sense on their own, with no context. An easy way to understand this is to think about an RSS feed – each entry on the feed is like a section. If you would add it to an RSS feed (or it would make sense in that context), then it’s probably a section. If it’s just a column on a footer, then you wouldn’t put it on an RSS feed, so it’s probably not a section.
Based on that, I’d probably do something like this (based on my assumption about what you are putting in each bit). I’m also adding the WAI-ARIA landmark roles, as they are simple and make a lot of difference when you are using a screen reader.