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 div
s 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 thediv
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.