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".
If you are fluent in Portuguese, then please help us - just point to any untranslated element (highlighted with a yellow left border - remember that images should have their titles translated as well!) inside the article and click the translation button to get started. Or have a look at the current translation status for the Portuguese language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
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