The idea of:

Is to say “Hey this is the navigation of the website” to (lets say) the robots.

In regards to Bruce Lawson’s comments about the nav not being allowed in the footer, I’m kind of on both sides with that.

I get that the footer isn’t a counterpart of the header. I guess there are so many typical scenarios of list being used in the footer that automatically most people would abuse the nav as an alternative for ul’s & ol’s.

It seems like w3 are trying to “prevent novice use” in most cases.

As mentioned, there’s no need to use with I would assume unless the nav serves as some kind of list content as well.

On my site, I much prefer the simpler
<nav>
<a href="…">Nav Link 1</a>
<a href="…">Nav Link 2</a>
</nav>

I for one hate sites that have a link within a tab but the link doesn’t cover the whole tab. I much prefer having the entire tab be the link.

Any element may be used for styling – that’s why you can hang CSS on p, video, ul, li etc rather than only div.

But you shouldn’t add elements that don’t need to be there just to hang styles off; in that case, use div.

Pragmatically, if you don’t want to use the JavaScript shim for IE6 – 9, don’t try to style the new semantic elements. But that’s to cover an IE bug, not because styles should only go on divs.

In fact, I don’t even use it for styling – it’s purely there for screen readers in my code.


<nav>
<ul id="primary">
<li> ...
</ul>
</nav>


In fact, I don’t use any of the new semantic html5 elements for styling (structure) at all – that’s what div is for.

I don’t mind that the <nav> is an area-tag rather than a list-tag, as it makes sense to mark up an area that is related for navigation. But the definition of how to use the tag pretty vague. I don’t understand why and bunch of links to key pages in a website in the footer, is less a navigation than the main menu in the header. It is still navigation to important places on the website.

In my oppinion the <nav> should be used for areas that allow the user navigate the site. Clusters of internal links along with descriptive texts and headers. Breadcrumb being an excellent example, as well as the footer links.

When I Googled “nav vs menu”, I didn’t realize how contentious an issue this is! But I actually prefer ‘menu’ over ‘nav’ because the markup for ‘menu’ is simpler. The ‘nav’ tag requires that your list items are wrapped with ‘ul’. It’s no different than using a ‘div’ tag. But the ‘menu’ tag accepts list items without needing a ‘ul’ wrapper. In essence, ‘menu’ replaces ‘ul’ when you want to make a navigational list. It verifies and displays correctly as a list when CSS is disabled. Whatever styles you have now for ‘ul’ will work for ‘menu’.