TOC

The community is working on translating this tutorial into Portuguese, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

Semantic HTML5 section tags:

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
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!