Using the HTML5 section element

There is a trend amongst web developers towards using the HTML5 section element wherever and whenever possible. In the enthusiasm for all the other HTML5 structural elements, there is a growing tendency for the section element to be used whether it’s the right element for the job or not.

The section element is not a div

The HTML5 section element is not a replacement for a div. It’s easy to think it should be, because all the other structural elements that were introduced in HTML5 (header, footer, main etc.) replaced all the divs we used to use to denote those areas of a page.

The HTML5 specification is clear about this

“The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.”

If you’re wondering why it makes a difference, the answer is semantics. The div is a semantically neutral element, the section element is not. The section element is exposed through the browser’s accessibility API, and that information is picked up by assistive technologies and communicated to users.

For example the Jaws screen reader announces “Region” each time it encounters the section element. It announces “Region” rather than “Section” because the section element maps to the role of region (and it’s the role that’s exposed via the accessibility APIs).

The section element is a thematic container

The section element is a container for content that has a related theme. The HTML5.0 specification has this to say:

“A section, in this context, is a thematic grouping of content, typically with a heading.”

At the time of writing the HTML 5.1 nightly specification provides even more clarity:

“The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1 – h6 element) as a descendant of the section element.”

The section element should have a heading

The heading is important. If you can’t think of a suitable heading for the content within a section element, there’s a good chance you shouldn’t be using the section element at all. Time to consider a div instead.

The heading is important for another reason. It can be used to increase the semantic information that’s available about the section element through the browser’s accessibility API.

Applying the aria-labelledby property to the section element and pairing it with the heading’s id attribute, enhances the information that’s available to assistive technologies.

<section aria-labelledby="sectionHeading">
<h2 id="sectionHeading">Weather report</h2>
...
</section>

Now the name of the region is exposed via the accessibility APIs for ATs to use. For example, the Jaws screen reader would announce “Weather report region” if it were to encounter the section element shown above.

To keep your pages semantically clean, and user friendly for people using assistive technologies, keep these things in mind:

• Don’t use the section element if you just need a hook for styling or scripting.
• Use the section element when your content has a theme.
• Give your section element a heading and associate the two programmatically.