Intermediate Recipe: Using the HTML5 Outliner to Ensure the Correct Structure

With these new elements, you have the opportunity to make your content flow in a logical manner and to allow people to navigate through the content using the hierarchy (using screen readers, for example), rather like a table of contents. Testing against the outline allows you to check that you are using headings and sections correctly. There are various browser extensions and websites at your disposal, but here we will be using a Google Chrome extension: http://code.google.com/p/h5o/.

Download the Chrome extension, and once it is installed, you get an icon in the address bar, as shown in Figure 1.11.

When you select this tool, you will see displayed data that looks like a table of contents, usually with the content indented.

If you have organized the content properly, you should have a structured and logical table of contents. You want to avoid “Untitled section/article.” If that message is displayed, chances are that you have used the wrong markup, so you need to reexamine your markup. Note, however, that nav and aside are allowed to have “Untitled section.”

A correct outline might look something like this:

Figure 1.12 shows an example document outline. The indents are correct, and there are no untitled sections (apart from the nav, but that is fine).

Figure 1.12. Basic HTML5 page in Google Chrome showing the results of the document outline

[View full size image]

The outline you will create in this recipe is as follows:

Listing 1.12 shows the source code for this page.

Listing 1.12. Making a Basic Document Outline

<header>
  <hgroup>
    <h1><a href="#">Loads of News</a></h1>
    <h2>Bringing you all kinds of news</h2>
  </hgroup>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Home</a></li>
  </ul>
</nav>
<section>
  <h1>Sports News</h1>
</section>
<section>
  <h1>Entertainment News</h1>
</section>
<section>
  <h1>Nerdy News</h1>
</section>

					  

This has a header at the top of the page, which is used as the first node in the outline (not the page title) and then sections that also have headings. There is an hgroup element used in the header element with the text “Bringing you all kinds of news!” but you do not see the h2 in the outline because the outline reads the first heading (h1, h2, h3, h4, h5, or h6) in the element.

The section, article, nav, and aside elements begin the indents (sections) in the outline. The sections have an h1, which is displayed in the outline. You could use an h2 or h3 if you wanted; it does not matter. If you had a section with content but no heading, the outline would say “untitled section,” and you want to avoid that scenario.