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.
section element is not a
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
sectionelement 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
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.”
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
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.
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
sectionelement if you just need a hook for styling or scripting.
- Use the
sectionelement when your content has a theme.
- Give your
sectionelement a heading and associate the two programmatically.