Issue #8 - the section element

The section element is one of those elements that causes a lot of confusion. It least it did for me before I wrote this issue. Usually I would refrain from using it because I just wasn’t sure whether it’s appropriate. On the other hand, I see a lot of websites that use it excessively. I hope that this post and especially the linked resources help you use it carefully in the future.

Have a great weekend,
Manuel

View this issue in the browser.

HTMHell Newsletter Issue #8 - the section element

Use the <section> element to mark up a grouping of related content, typically introduced with a heading.

<h1>Welcome to GOV.UK</h1>
<section>
  <h2>Services and information</h2>
  …
</section>
<section>
  <h2>Departments and policy</h2>
  …
</section>
…

It’s not always clear when it’s appropriate to use the <section> element and how to use it properly. I’ve collected some guidelines to help you decide.

Implicit region and exposed role

By default, there’s no difference between a <section> and a <div> regarding the semantic information exposed to assistive technology. For a screen reader, the following two code snippets are practically the same:

<section>
  <h2>Services and information</h2>
  …
</section>

<div>
  <h2>Services and information</h2>
  …
</div>

Regardless of the information exposed to assistive technology, it still makes sense to use <section> when appropriate. It’s a semantic element that allows us to structure a page and maybe style it accordingly using the section tag selector.

div vs. section

<section> is no replacement for the <div> element and must not be used for styling purposes only.

The class names in the following code snippet and the fact that the sections are nested in a <header> indicate that their only purpose is to split the header into four columns visually. They’re not important sections of the page. (Of course, the search and the navigation are important parts of a page, but <nav> is a landmark on its own and you can turn a search form into a landmark by applying the role="search" attribute and value.)

<header class="site-header">
  <section class="site-header__title"></section>
  <section class="site-header__logo"></section>
  <section class="site-header__search"></section>
  <section class="site-header__nav"></section>
</header>

There’s a useful rule of thumb in the HTML specification:

A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

You can read about the document outline in Issue #6 - the document outline.

region landmark

The <section>’s exposed role and purpose change when you label it using aria-label, aria-labelledby or with the title attribute. Labelling it using these attributes turns it into a landmark, which exposes a different role (region) and gives screen reader users easier access to the section. (Note: Safari doesn’t expose the region role when named via title)

<section aria-labelledby="results">
  <h2 id="results">Results</h2>
  …
</section>

Other landmarks are, for example, <header>, <main> or <footer>, important sections of the page. With that said, only promote a <section> to a landmark if it plays an important part in the current page.

The document outline

If you have multiple <h1> elements in a page and you’ve nested some of them in <section>s, semantically you still have multiple level 1 headings. The font size of an <h1> nested in a <section> may decrease, but the level exposed to assistive technology is still 1. There Is No Document Outline Algorithm.

Conclusion

If you’re not sure whether to use a <section>, it’s probably best to not bother with it. It’s much more important that you create a sound document outline.

PS: Thanks a lot, Scott, for writing Accessibility of the section element which helped me understand the section element much better.

Resources

• Accessibility of the section element
• 4.3.3 The section element
• Why You Should Choose HTML5 article Over section