Constructing Content
nav
A nav element contains navigation—a group of links that lead to other pages on a website, or to sections
of the current page. In a sense, all links are navigation, but don’t use nav for every collection of links; the
nav element is intended only for major blocks of navigation. This element should be an important signpost
for your visitors to come to when they’re trying to find their way to particular areas of interest.
Most websites have a global header or masthead, a prominent banner that features the site name, logo,
and usually the primary navigation for the website. That primary navigation almost certainly warrants a nav
element. Some lengthy articles may have an internal table of contents, listing the article headings and
subheadings with shortcut links to jump directly to that part of the page; that’s a job for the nav element,
too. If content is spread across multiple pages, like search results or a catalog showing 20 items per page,
you’ll want to include pagination links to reach those other pages—another perfect use for the nav
element.
But sometimes you’ll need to mark up a group of links that aren’t necessarily vital navigation aids for your
users. For example, a sidebar (possibly marked up with an aside element) might feature links to other
related articles; useful, yes, but maybe not what you’d consider “major navigation.” A footer element
might hold similar related links, or links to a privacy policy and contact page; those probably aren’t major
navigation either. Then again, perhaps they are. There’s no rule forbidding nav for such uses, but it’s
usually not necessary. Think about what your links mean, how they relate to the document or the rest of
the website, and how your visitors will use them.
In Listing 4-6 you can see a site’s global header, including a list of links to the main pages of the website
wrapped in a nav element (the ul element—an unordered list—is covered elsewhere in this chapter).
Listing 4-6. The nav element in a site’s global header
<header>
<hgroup>
<h1>Power Outfitters</h1>
<h2>Superhero Costume and Supply Company</h2>
</hgroup>
<nav>
<ul>
<li><a href="/costuming">Costuming</a></li>
<li><a href="/gear">Gadgets and Gear</a></li>
<li><a href="/weaponry">Non-lethal Weaponry</a></li>
<li><a href="/defense">Armor and Defense</a></li>
<li><a href="/base">Lair and Vehicle</a></li>
</ul>
</nav>
</header>
Like other sectioning elements, nav has no default styling except display:block. It requires an end tag
and can contain any flow elements, including other sectioning elements, even another nav element if
necessary.
