Understanding HTML5’s Document Outline

In the previous section, you learned that the headings elements, h1–h6, contribute to your HTML page’s outline. You’re going to dig under the hood more in this section to learn how a handful of elements unique to HTML5 also affect the outline.

One syntactical note before you continue. In the discussion and pages to follow, I’ll often use “section” as a generic term to mean a distinct part of a page, as opposed to the section element (which you’ll learn about) specifically. When I am referring to the section element, the word will be styled like code just like it is in this sentence.

OK, carrying on.

So, you know that each HTML document has an underlying outline, which is like a table of contents, as defined by the heading elements. Now, the outline isn’t something that displays in your page explicitly—though browsers may one day provide a means to see it—but as with all semantics, it’s meaningful to the likes of search engines and screen readers, which use the outline to glean the structure of your page and provide the information to users.