HTML5 nav tag correct usage

Tom Gullen picture Tom Gullen · Mar 3, 2011 · Viewed 22k times · Source
<ul class="mainMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#" class="mainSelected">Construct</a></li>
    <li><a href="#">Arcade</a></li>
    <li><a href="#">Manual</a></li>
</ul>
<ul class="subMenu">
    <li><a href="#">Homepage</a></li>   
    <li><a href="#">Construct</a></li>
    <li><a href="#" class="underSelected">Products</a></li>
    <li><a href="#">Community Forum</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Is it more semantically correct to have a <nav> around both these <ul> individually, or should one nav wrap both?

Also would it be appropriate to use the nav tag to wrap around my footer menu items?

Answer

Martin Jespersen picture Martin Jespersen · Mar 3, 2011

To quote the specs:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.

So feel free to wrap both in a single nav tag. Don't wrap the footer but use the footer tag here :)

Read the specs here: http://dev.w3.org/html5/spec/Overview.html#the-nav-element