Checking Your Document Outline | HTML5 Tutorial pdf

Checking Your Document Outline

Problem
You want to view your document’s content outline.
Solution
Run your page through the HTML5 Outliner tool: http://gsnedders.html5.org/outliner/.

Discussion

HTML5 has an outline algorithm that calculates the structure of a web document. This algorithm is based on sections defined by the new structural elements.
For the main document outline, section and aside each introduce a new section in the outline, while the heading(s) within each form the outline content. This is known as explicit sectioning.
Let’s examine the following markup example:
<section>
<h1>Most Recent Blog Posts</h1>
<article>
<h2><code>nav</code> Isn't for <em>All</em> Links</h2>
<p>Though the <code>nav</code> element often contains links, that doesn't mean that <em>all</em> </article>
<article>
<h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>
<p>HTML5 isn't an all or nothing proposition. You can pick and choose what works best for you. So </article>
</section>

This markup would generate the following document outline:
1. Most Recent Blog Posts
a. nav Isn’t for All Links
b. 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> </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 </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 the original example:
1. Most Recent Blog Posts
a. nav Isn’t for All Links
b. 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.

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 sub-section 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:
<section>
<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>
<h2>Block-Level Links</h2>
<p>With HTML5, <code>a</code>s can contain block ...</p>
<h3>Looking Back</h3>
<p>In earlier versions of HTML, you had to ...</p>
<h2>Add Structure</h2>
<p>HTML5 gives us several new elements to add ...</p>
</section>

This example utilizes heading rank, rather than explicit sectioning elements, to generate the following outline:
1. You’ve Got the DOCTYPE, Now What?
a. Simplified links and scripts
b. Block-level Links
Tip #2: Looking Back
c. 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 helps you decide which structural elements to use. Remember how section should have a natural heading Checking your document outline show if you have neglected to include a heading, which may prompt you to reconsider whether that element was the most appropriate 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 helps significantly when deciding which elements and heading levels to use.