HTML and CSS Reference
An implicit section starts with a new heading and is positioned in the document outline
according to that heading's rank in relation to a previous heading. If a heading is a lower
rank than its predecessor, it opens a new subsection in the outline. If a heading is a
higher rank, it closes the previous section and opens a new one.
Let's create a new example to see how heading rank supports implicit sections:
<h1>You've Got the <code>DOCTYPE</code>, Now What?</h1>
<h2>Simplified <code>link</code>s and <code>script</code>s</h2>
<p>HTML5's more flexible and simplified syntax ...</p>
<p>With HTML5, <code>a</code>s can contain block ...</p>
<p>In earlier versions of HTML, you had to ...</p>
<p>HTML5 gives us several new elements to add ...</p>
This example utilizes heading rank, rather than explicit sectioning elements, to generate
the following outline:
1. You've Got the DOCTYPE, Now What?
1.1 Simplified links and scripts
1.2 Block-level Links
1.2.1 Looking Back
1.3 Add Structure
Why is this important?
Knowing what your document outline looks like can help you decide not only which
heading levels to use, but also which structural elements to use. Remember how we
said that a section should have a natural heading ( Recipe 1.6 )? Checking your docu-
ment outline will show you if you have neglected to include a heading, which may
prompt you to reconsider whether that element was the most appropriate one to use
for your content. Additionally, a document outline that accurately reflects your content
hierarchy can help users of assistive devices navigate your site.
Unfortunately, no browsers have implemented this outlining yet, nor do any assistive
technologies utilize it for navigation. Still, checking the document outline should be a
part of the development process, and it helps significantly when considering which
elements and heading levels to use.
For an extremely detailed look at the outline algorithm and sectioning, the Mozilla
Developer Network at https://developer.mozilla.org/en/Sections_and_Outlines_of_an
_HTML5_document is an excellent resource.