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:
Try this example
<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.
0 comments:
Post a Comment