Using The < nav > Element in HTML5

Posted on Wed, May 08, 2013 in Web Design, User Experience, by Kevin Carpenter

With the addition of the nav element in HTML5 there is much confusion as to when to use it. The HTML5 specification definition is the following:

"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 do we use it?

The nav element should surround blocks of content that act as links to other parts of the site:
<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

Where to use the nav element?

The specification of this element hasn’t completely been defined at the moment but my own personal 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, but not limited to:

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

At the moment, it is completely up to how the author of the HTML document interprets the specification and I’m sure sometime soon it will become common practice to use the nav element in a specific, coherent way. Maybe using the nav element for site wide navigation will become the default method for using this element. For now, I feel safe to use it wherever there are large chunks of navigation present within a document.

Tell Us About Your Project

Invalid phone number