HTML5: The nav element

This article is one in a series of brief discussions about the proposed specifications for HTML 5. View the Working Draft for HTML 5 at the W3C.

The nav element is a new semantic element. It is meant for navigation or a table of contents. Each nav may include other  HTML elements, particularly lists of links.  The nav element is meant for blocks of links, not for individual links mentioned in textual content or for links in the footer area of a section or article.

It replaces the concept of a <div id=”nav”> element with a semantic element meant specifically as a navigation area.

As with other new semantic elements in HTML5, there may be more than one nav element on a page. Perhaps global site navigation and secondary level navigation blocks for subsections of a site.  They can be styled with hooks like individual id or class attributes, or using descendant selectors based on where they are nested on the page. The HTML5 replacement for what we have commonly thought of as a sidebar is the new aside element, which is meant to hold content such as the nav element.

Here is sample HTML for a nav element:


<nav>
<h1>The Navigation</h1> <ul>
<li><a href="/">Home</a></li>
<li><a href="/software">Software</a></li>
<li><a href="/support">Support</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>

The Opera browser, Safari, Firefox, and, to a more limited extent Internet Explorer, support some or most of the HTML5 specifications, including the nav element.

See also HTML5: The Doctype Declaration