Sections and Articles are Not Generic Containers

html5 logo

The proper use of section and article elements in HTML5 is one of the sticking points to good implementation. If you’re teaching HTML5, or just learning about HTML5, here’s a tip for you.

A section element (or an article element) should not be used as a container for styling purposes. However, any time you have some content that needs a heading or h1, h2, etc. at the beginning, sections and articles are semantic candidates for proper markup.

If what you are doing is wrapping something up in a container with an id or class that will be used for anything but content with a heading at the top, you should use a div. A div is, by definition, a generic container. It carries no semantic meaning. It needs no heading element. It is meant to hold blocks of the page for styling purposes.

The W3C offers this guidance:

Each section should be identified, typically by including a heading (h1-h6 element)as a child of the section element.

 

Each article should be identified, typically by including a heading (h1-h6 element) as a child of the article element.