« Back to CPW Home

HTML5 Logo

Outline Algorithm

The Outline Algorithm determines how sectioning content should be parsed in order to build an outline of the current document.

Automatic outline generation is important for search engines, assisted-technologies, syndication, readers, and other web crawlers.

User Agent Parsing

Sectioning Elements

Two things can create sections within a document:

The "title" of the section is determined by the first heading content within the section, regardless of it's hierarchy.

After that, each heading creates a new heading in the outline. The nesting of heading-generated sections is controlled by the heading rank: h1 - h6.

Div tags, by themselves, do not create sections. But if the div contains a heading tag, then that will create a new section.

Headings can create implicit sections

Heading tags that are not the first heading in a section, will create new, implicit sections, despite the absence of a containing sectioning element.

HTML4: the only way to section page content was by using different heading ranking. And, often there was only one h1 element per page.

HTML5: individual sections have their own distinct hierarchy apart from the page. So you can use more than one h1 per page. Many authors have not adapted this practice yet.

Use hgroup to override sectioning

The hgroup can contain only heading elements.

The highest ranking heading element will title the section, regardless of the placement within the hgoup. For example, an h1 may be the third heading tag in the hgroup, but it will be the title in the outline, and the other, lower ranking headers will not be included in the outline. This is the override effect.

Sectioning roots

Sectioning roots (blockquote, details, fieldset, figure, td) have their own outline, outside of, i.e., hidden from, any parent element's outline.

Remember that the body element is also a sectioning roots. And, consider this when merging content from multiple pages.


Spec: Creating an outline

HTML5 Outliner

Spec, Author view: Headings and Sections

Chrome HTML5 Outliner Extension
In a Chrome browser, go to this link, find Chrome's Extensions, and search for "HTML5 Outliner". It's a free download.

Opera HTML5 Outliner Extension

H5O for Firefox
The string "h5o" means "HTML5 Outliner". This generic outliner works in Firefox, even for local files. It's buggy in IE.

« Back to CPW Home