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’.


<div>
<!-- Main Navigation -->
<nav>
<ul>
<li><a href="#">Main Page 1</a></li>
<li><a href="#">Main Page 2</a></li>
<li><a href="#">Main Page 3</a></li>
</ul>
</nav>

<!-- Breadcrumb -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Main Page 2</a></li>
<li><a href="#">Sub Page 2.1</a></li>
<li><a href="#">Post title</a></li>
</ul>
</nav>
</div>

Or…


<nav>

<!-- Main Navigation -->
<ul>
<li><a href="#">Main Page 1</a></li>
<li><a href="#">Main Page 2</a></li>
<li><a href="#">Main Page 3</a></li>
</ul>

<!-- Breadcrumb -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Main Page 2</a></li>
<li><a href="#">Sub Page 2.1</a></li>
<li><a href="#">Post title</a></li>
</ul>
</nav>

I think the second one is correct, but I would like to know how you think about it.

Like others pointed out, it’s idiotic having to write “n a v” followed by “u l” then “l i”. I don’t know what the guys responsible for HTML5 were thinking. Probably nothing, like so much else in that new HTML version.

Inside a “n a v”, it should be possible to drop the “u l” because it just bloats the code. “l i” should stay though, as not every text listed should be part of a clickable link.

Inside a , it should be possible to drop the because it just bloats the code. should stay though, as not every text listed should be part of a clickable link.