The navigation tag

Another one of the new semantic elements of HTML is the <nav> element. The <nav> element represents the navigation for a document. The navigation can be within the document or to other documents, but it is important to notice, that not all links in a document should be marked up with the <nav> element.

The <nav> element should only be used for the primary navigation structure.

So how do I use the <nav> tag? In "the old days" you would probably have used a div to do your mark up:

<div id="menu">
	<ul>
		<li><a href="home.html">Home</a></li>
		...
	</ul>
</div>

Or maybe something like this:

<div id="navigation">
	<ul>
		<li><a href="home.html">Home</a></li>
		...
	</ul>
</div>

And markup wise, the difference is quite small – you just have to replace the old <div> with the new more semantically correct <nav> element, like this:

<nav>
	<ul>
		<li><a href="home.html">Home</a></li>
		...
	</ul>
</nav>

So, this means that it is easy to use the new <nav> element, right? Unfortunately: no. There is little consensus of when to use the <nav> element. Can it be used on breadcrumbs? Related posts? Pagination? Some people would say "Definately" while others would say "No way!"

Should this stop you from using the <nav> element? No. You could use the <nav> element for all of the above mentioned examples and it is up to you to decide if and where you want to use it. A rule of thumb might be to use it whenever you would have used the <div id="menu"> or <div id="navigation">, and this entails that both of the before mentioned examples can be marked up with the <nav> element.

What you have learned

• The <nav> element should be used for the primary navigation structure
• Some might use the <nav> element for bread crumbs, pagination and related posts
• Essentially, it is your own perception of the semantics of the <nav> element that decides how you use it.
• The <nav> element is a block-level element