HTML and CSS Reference
HTML5 outline algorithm
Known as the HTML5 outline algorithm , this part of the HTML5 specification
provides rules for breaking content into a nested list of sections, each with a heading.
Providing a standard algorithm for understanding and parsing the structure of a web
page means every properly structured web page automatically gets a “table of contents”
that may be used by, for example, screen readers (for vision-impaired users) or used in
syndicating sections of content.
Note A section 1 is just a grouping of content—think of it as a box around some con-
tent on the page—while a heading is like the label slapped on the box, saying what it
To simplify a bit, the outline algorithm parses a document using the following rules:
1. Assign the body element as the root section under which all other
page sections are grouped.
2. Assign the first heading content element found to be the heading for
the body .
3. For each subsequent sectioning content element found, define and add
new sections and subsections to the outline.
4. Assign the first heading content element found in each subsequent sec-
tion to be the heading for that section.
In the preceding steps, notice the two content model categories mentioned, heading
content and sectioning content. Elements in these two categories were under the section
of elements; heading content encompasses the h1 , h2 , h3 , h4 , h5 , h6 , and hgroup
elements, while the article , aside , nav , and section elements fall under sec-
tioning content. 2
1 There is a section element in HTML, but in this context “section” is used as a general term that
covers the HTML elements present in the sectioning content model category.
2 Note that (perhaps surprisingly) div is not included in sectioning content.