Brought To You By
Tomlin Ventures Ltd

HTML5 Section Or Article Element

Should You Be Using The Section Or Article Element As The Page Container

Whether or not you have delved into the world of HTML5 yet as a webmaster I'm sure you're aware that HTML5 introduces some new elements to web page structure. On the whole these new elements are fairly self descriptive. There are however two new elements which appear to be causing quite a few issues. Those are the Article element and the Section element. The issue seems to be that there is a lot of confusion over where each of these elements should and should not be used within a page. Do articles contain sections or do sections contain articles?

I think the first thing to do is to take a look at what the most recent W3 HTML5 editors draft has to say on this matter.

Article element

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable.

Examples could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Section element

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. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

Now, although not obvious from the descriptions above, if we take a look at the accompanying examples in each case we can see more easily how these two elements are meant to be used.

The article element should be used to contain independent / self-contained content which in most cases will be the main page content on a web page; we will look at some examples towards the end.

The section element is just that, a section. In most cases therefore the section will occur within a parent article element. This is not to say that an article cannot occur within a section element just that the section element would not generally be used as a primary container for page content.

If you think about it this make sense, if you were to put the main content of your page within a section element it would be like saying that it was only a section contained within a wider document on a related subject.

Where a lot of the problems seem to have come from may be attributable to the fact that both the section and the article are inline elements, meaning that they can both technically be nested within one another.

The easiest way to get to grips with this is to look at some real life examples expanding on those given above.

A forum thread

  1. The whole thread, question and replies should be contained within the article tags.
  2. Each reply would itself be contained within an article element.

A blog post

  1. The blog post and any comments should be contained within the article tags.
  2. The comments should be contained within a nested section element, thereby grouping all comments together.
  3. Each individual comment would itself be contained within a nested article element.

I hope this sheds some light on what seems to be becoming a rather confused issue. Group your main content within an article element and then if need be use section elements to break it up into relevant sections.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus