HTML5: Section or Article?

One of the main questions I have seen popping up all over the place in relation to HTML5, in forums, StackOverflow, and Twitter, is “which do I use: article or section?”

In fact quite often the answer is “neither, use a div” but these two new elements initially aren’t all that easy to get your head around and because it forces us to think about what we’re writing and the way we present it, we’re thinking in a way we haven’t had to before when laying out a HTML page. And whilst this is a good thing, it does require a bit of thought.

Many HTML5 gurus such as HTML5Doctors Oli Studholme and Bruce Lawson have written about this, and this article adds my own voice and thinking on this one.

Div

The first question you need to ask yourself, is if you simply want to contain information for styling, use a div. The meaning of the div element hasn’t changed in HTML5 from HTML 4.01 and it is often the case that this is what you need. If the elements being enclosed are not related to each other semantically and have no generic heading, then div is your man.

Section

Now that you’ve decided that the content to be enclosed is related, let’s take a look at the section element. The HTML5 specification currently states that:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

So basically the section element should contain related information grouped under a generic heading.

Estelle Wey creates a good analogy when she talks about a newspaper being split into sections: news, sports and real-estate (well she is American). Each of these has a generic heading and contains information that is related to this heading. Chances are each of these sections will contain articles, which leads us nicely onto…

Article

The article element is specific type of section element in that it:

represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

(HTML5 specification again).

So using the newspaper analogy above, the sports section will contain articles that are about sports, with each individual piece having it’s own heading and story and being entirely self-contained.

The HTML5 specification also likes to point out that:

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

and in this case once again the news article analogy holds true, as newspaper websites RSS feeds will often contain links to each article – which is self-contained.

Nesting

That’s all well and good, but where some more confusion reigns is where you can have an article inside a section which also contains sections itself. This is perfectly legal (in HTML5 terms) and usually a good idea if the article is a long one and splitting it up into sections is logically a good idea.

This of course means that you can get into a muddle with too many nested sections and articles within each other, but as with divitis, in general if that begins to happen you’re doing it wrong and need to go back and rethink your semantic structure.

Conclusion

I could have filled this article with many code examples, but ultimately you need to think about this one yourself as it’s your content and you need to think about how is should be presented semantically. There are no real hard and fast rules regarding using article and section, just guidelines to help you make an informed decision and you’ll make mistakes on the way and will learn from them (just as I and others have).