- Beginner Recipe: Building an HTML5 Starter Document
- Where Do All the New Elements Come From?
- Beginner Recipe: Using the header Element to Create a Site Header
- Beginner Recipe: Using the hgroup Element to Group Headings
- Beginner Recipe: Creating Navigation with the nav Element
- Intermediate Recipe: Using the New article Element
- Intermediate Recipe: Grouping Content with the section Element
- Beginner Recipe: Creating a Sidebar with the aside Element
- Beginner Recipe: Using the footer Element
- Intermediate Recipe: Using the HTML5 Outliner to Ensure the Correct Structure
- Advanced Recipe: Using All the New Elements to Build a News Page
- Advanced Recipe: Using All the New Elements to Build a Search Results Page
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
)
Figure 1.11 Website in Google Chrome with the HTML5 Outliner extension icon
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:
- Website name
- Blog
- Article title
- Article title
- About me
- My name
- My likes
- My dislikes
- Contact me
- Blog
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).
){kind=link}
)
Figure 1.12 Basic HTML5 page in Google Chrome showing the results of the document outline
The outline you will create in this recipe is as follows:
- Loads of News
- Bringing you all kinds of news!
- Untitled NAV
- Sports News
- Entertainment News!
- Nerdy News
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.