HTML Navigation menu: Should I use the Nav or Menu tag?

When using the new HTML5 tags to make your site more semantic you’ll find yourself wondering about things like this. With a little bit of research, I came up with the appropriate use of each : )

TL;DR

If your menu is a navigational menu, meaning that its links will bring you to another page of your site, use the <nav> tag.

However, if your menu is intended to modify the actual page or trigger some kind of action, you should use the <menu> tag.

Explanation

As the HTML5 Specification says:

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.

On the other hand, this it what it says about the use of the <menu> tag:

The menu element is used to define context menus and toolbars.

It seems clear that for the typical main menu scenario, with links to other sections of our site, we will use the <nav> tag.

You should also use appropriate list markup for the links inside of it. Here’s an example:

<nav>
    <ul class="b-menu">
        <li class="b-menu__item"><a href="#">Link 1</a></li>
        <li class="b-menu__item"><a href="#">Link 2</a></li>
        <li class="b-menu__item"><a href="#">Link 3</a></li>
    </ul>
</nav>

It is important to notice though, that the <nav> tag is intended to be used with major blocks of navigation in our page, so not every link has to be automatically inside this tag.

Ok but, what if I’m developing a WebApp?

Then, you should probably think about using the <menu> tag instead. It’s likely that your menu will trigger some behaviour on the same page, like refreshing a shopping list, or moving an e-mail to the trash bin.

If that’s the case, you have the perfect opportunity to use the <menu> tag!

Further information

To find out more about what to use in specific cases I really recommend you reading this HTML5Doctor post about the topic.