- 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
Beginner Recipe: Creating Navigation with the nav Element
The nav element, as you might expect from its name, is for navigational content. It is used to link to other pages within the site or to other parts of the page (a table of contents, for example).
The most common use of a nav is for the main navigation on a website. It is common practice to use an unordered list to code navigation, as shown in Listing 1.4.
Listing 1.4. Traditional Way of Marking Up Navigation
<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Meet the team</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul>
This code does not change too much when creating nav elements in HTML5. The code for Figure 1.5 would be something like that shown in Listing 1.5.
){kind=link}
)
Figure 1.5 Sitewide navigation that would be inside a nav element
Listing 1.5. Navigation Markup in HTML5
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Meet the team</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
You can put nav in the header as well, as shown in Listing 1.6, because the header allows for introductory and navigational content. However, it does not have to be in the header, and sometimes its placement might depend on styling issues. It is also quite common to see a navigation menu in the footer of a page, sometimes duplicating the main site navigation.
Listing 1.6. The nav Element Inside a header Element
<header>
<h1>My super HTML5 site</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
It is not necessary to put all links on a page in a nav element. The HTML5 specification warns that only blocks of "major navigation" are considered appropriate for the nav element.
On news or blog sites, it is common to see a sidebar with links to articles and other pages. The markup in Listing 1.7 is used to produce the element shown in Figure 1.6.
){kind=link}
)
Figure 1.6 Example of grouped navigation in a sidebar. "Shared," "Read," and "Watched/Listened" would each be in a nav.
Listing 1.7. Multiple Navigation Groups in a Single nav Element
<nav>
<h2>Shared</h2>
<ul>
<li><a href="#">Pellentesque habitant</a></li>
<li><a href="#">Morbi tristique senectus</a></li>
<li><a href="#">Aenean ultricies mi vitae est</a></li>
</ul>
<h2>Read</h2>
<ul>
<li><a href="#">Pellentesque habitant</a></li>
<li><a href="#">Morbi tristique senectus</a></li>
<li><a href="#">Aenean ultricies mi vitae est</a></li>
</ul>
<h2>Watched/Listened</h2>
<ul>
<li><a href="#">Pellentesque habitant</a></li>
<li><a href="#">Morbi tristique senectus</a></li>
<li><a href="#">Aenean ultricies mi vitae est</a></li>
</ul>
</nav>
Notice that there is an h2 to separate groups of links in the nav. In Figure 1.6, the h2 tags can be used as tab headings, so when a heading is selected by the user, the content switches (this effect can be achieved with JavaScript). A heading element is not always necessary but should be used to break up and structure navigation groups when possible. For styling reasons, you may need to separate the previous example into two nav structures, which is also fine.
There is a big accessibility win when using the nav element. Assistive technology, such as screen readers, will be able to search and immediately use groups of navigation rather than waiting for them to appear on-screen. Traditionally, developers have used "skip" or "jump" links as the very first things in an HTML document, and they are usually links to the main navigation or main content. However, using the nav element means you will soon be able to drop such "skip" menus. The only problem is that currently assistive technologies have limited support for HTML5 elements. However, they will soon catch up.