Most of HTML5 seems to be pretty self-explanatory. Unfortunately there are a few things that just aren’t. For example, the complex outlining algorithm, and the section element. It’s confusing as hell and everyone has a their own way. So we may as well dive in head first…

Here’s our working HTML one more time in case you missed it:

[html]

header

HTML 5 Demo

article

Terminology and Usage

section

• The header element represents a group of introductory or navigational aids.
• The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
• An article element is “independent” in the sense that its contents could stand alone, for example in syndication.
• The section element represents a generic document or application section…[it] is not a generic container element.
• The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
• The footer element represents a footer for its nearest ancestor sectioning content.

[/html]

section

The section element is defined by the W3C as “a generic document or application section…[it] is not a generic container element.” I don’t think one could be any more vague and contradictory. The only saving grace is a couple examples they give, namely tabbed elements, and chapters.

In my opinion this doesn’t necessarily limit you to sticking a section element inside of an article element, or visa versa. It doesn’t have to stand alone, it just has to group elements logically (unlike a div). So while some examples put sections around sets of articles, others put them within, to denote separate portions of the same article.

Our example HTML would be better served to have another section element after the first. That would be a great place to make a snarky comment about the vague and abstract language that only the Consortium can understand.

aside

Fortunately the aside element isn’t nearly as confusing as the section element. Use it as a sidebar with meta information related to the content. Pretty straightforward. You could put quotes, navigation, resources, links etc. inside this little fella. Just keep it related. This isn’t the place for global navigation elements.

footer

The last element in the series is the footer. While typically the last item on a page, a footer could also be used in a section or article. A great example would be all that meta information at the end of a blog post, e.g. categories, dates, tags, etc.

Conclusion

It’s your turn. Mock up your next site in HTML5 and see what happens. It might break, it might not, who knows. The spec is still unstable, but it is starting to gain traction. But definitely try it out. If we all start using it maybe we can have a usable spec in less than 20 years!