HTML5 Structure - <article>, <section> and <div> usage

Question

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:

1. Backgrounds are added to the body element. Working perfectly.
2. 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:

1. As a main container, I've used <div class="container_12">
2. 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.
3. 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.
4. 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>.

Answer 1

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.

<div class="container_12">
    <header class="grid_12" role="banner">
        <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>
        <nav class="grid_6 omega" role="navigation">
            <ul>
                navigation
            </ul>
        </nav>
        <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>
    </header>

    <section class="grid_12 content" role="main">
          <!-- Not sure what goes in here? Let's assume it's the main content. -->
    </section>
    <footer class="grid_12">
        <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>
    </footer>
</div>