Dave Woods - Freelance Web Design Warwickshire

HTML5 Nav Element

This article in the HTML5 series covers the explanation and usage of the <nav> element.

Nav Element Specification

The HTML5 specification defines the <nav> element as:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

How to use the <nav> element?

The <nav> element should surround blocks of content that act as links to other parts of the site:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Where to use the <nav> element?

The spec hasn’t completely been defined at the moment but my understanding is that you should use the <nav> element anywhere that you would consider to be the main way that a user navigates thoughout your site, these might include.

  • Primary navigation
  • Secondary navigation (or navigation that supplements the current content)
  • Breadcrumbs
  • Pagination (previous/next buttons)

At the moment it is a little open to how the author of the HTML document interprets the specification and I’m sure over the next year or so it will become common practice to use the <nav> element in a specific way. Maybe using the <nav> element for site wide navigation will become the default method for using this element but for now I’ll be using it wherever there are large chunks of navigation present within a document.

2 comments on “HTML5 Nav Element

  1. Peter Fisher

    Would it be safe to have an id on the nav that describes what type of nav it is. We can then use CSS to alter its appearance.
    I’m thinking something like:
    nav#primary
    nav#secondary
    nav#breadcrumbs
    nav#footer-links
    nav#side-menu