A sectioning root is a part of the document that defines a root or top-level section. These HTML5 elements can have their own outlines and the sections and headlines inside them do not contribute to the sections of their ancestors. In other words, content in a sectioning root will not appear in the main site outline. The elements that are sectioning roots are:
But what does that mean? HTML5 creates automated outlines of every page. But in order to create the outline, it needs to know what elements can be outlined and which ones cannot. You wouldn’t need an outline of the HEAD section of your document, because that does not display to readers. So the most common sectioning root that most web pages will have is the BODY element. This is where the HTML5 outliner will start to build the outline.
Once inside the BODY element, the outliner then looks for heading tags (H1–H6 and HGROUP) and sectioning elements (ARTICLE, ASIDE, SECTION, etc.) to build the outline.
The first heading element that is found inside a sectioning element is considered to be the heading for that section. And any heading elements that are the same level (H1 and H1 or H3 and H3) create new (implied) sections, while heading elements of a lower level create sub-sections within the current one.
A sectioning root like the BODY element should have a heading as well, and the first heading tag found outside of a sectioning element or other sectioning root will be considered the heading for the entire page.
HEADER and FOOTER Don’t Apply
Remember: the HEADER and FOOTER elements are not sectioning elements. This means, and this is important, that if you don’t have any other heading content in the BODY element, a heading in your footer could be seen as the heading for the entire page. For example:
<body>
<article>
<h1>Article Headline</h1>
...
</article>
<footer>
<h1>Bottom of the Page</h1>
</footer>
</body>
This HTML would have the outline:
- Bottom of the Page
- Article Headline
The outliner doesn’t see any headlines in the BODY element, and since the FOOTER element isn’t a section, it provides the only headline for the entire page, so that is what is used.
Where Sectioning Roots Fit In
A sectioning root is an element that can have sections within it, but is not included in the outline of the entire page or any sectioning root it is nested in.
In other words, a sectioning root starts an entirely new outline within the document. The outline for this HTML:
<body>
<header><h1>My Page</h1></header>
<article>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<blockquote>
<h1>This is a Blockquote in an Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
</body>
would be:
- My Page
- Article
And not include any of the headings inside the BLOCKQUOTE. The BLOCKQUOTE would have a separate outline of:
- This is a Blockquote in an Article
Why Do Sectioning Roots Matter?
In reality, right now, they really don’t have much impact. No screen readers currently support HTML5 outlines and separating out content into different sectioning roots doesn’t change how your pages display or are perceived by computers or web robots.
But in the future, this may change. Understanding how your document will look to an HTML5 outliner will help you perceive how search engine robots, screen readers, and other programs will evaluate your pages in the future. And knowing which portions of the page are considered completely different sections is important as well.
For example, if you were to write an HTML5 document where the majority of the content was in a BLOCKQUOTE or FIGURE, this could make the page seem almost empty to an outliner.
And it becomes even more apparent for those people who use tables for layout (which is okay again in HTML5). Every TD in your document becomes a separate sectioning root—in effect an entire new page—to the outliner. This may not matter to you, but it could make your pages harder to skim in a screen reader or give each table cell more importance than you intended to a search engine robot.
And finally, knowing what elements are sectioning roots and how that affects the outline can help you create pages that are clearer to your audience because when you think about the outline, you are making the page more logical.
Sectioning roots don’t affect the look of your pages, but they may in the future, so it’s a good idea to be aware of them.
