HTML and CSS Reference
In-Depth Information
</article>
</section>
This markup would generate the following document outline:
1. Most Recent Blog Posts
1.1
nav
Isn't for All Links
1.2 You've Got the DOCTYPE. Now What?
Heading levels
Regardless of version, headings in HTML are ranked, with
h1
being the highest and
h6
being the lowest.
Before HTML5, this ranking helped structure the document outline. However, with
HTML5, the importance of heading rank in determining the outline is trumped by the
sectioning elements.
Let's modify the previous example to reflect
h6
as the primary heading of
section
and
h1
as the primary heading of
article
:
<section>
<h6>Most Recent Blog Posts</h6>
<article>
<h1><code>nav</code> Isn't for <em>All</em> Links</h1>
<p>Though the <code>nav</code> element often contains links, that doesn't
mean that <em>all</em> links on a site need <code>nav</code>.</p>
</article>
<article>
<h1>You've Got the <code>DOCTYPE</code>. Now What?</h1>
<p>HTML5 isn't an all or nothing proposition. You can pick and choose what
works best for you. So once you have the <code>DOCTYPE</code> in place,
you should explore.</p>
</article>
</section>
Because HTML5 uses the structural elements
section
and
aside
to know when a new
outline section begins (not the headings), we still get the exact same outline as in the
original example:
1. Most Recent Blog Posts
1.1
nav
Isn't for All Links
1.2 You've Got the DOCTYPE. Now What?
Implicit sectioning
Since structural elements aren't
required
in HTML5, heading rank does still affect the
document structure if sectioning elements aren't used. This is known as
implicit
sectioning
. Further, implicit and explicit sectioning can be used together to form the
document outline.
