DaveW DaveW - 6 months ago 38
HTML Question

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

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

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>