<nav> or <menu> (HTML5)

HtmlMenuStandardsNav

Html Problem Overview


W3Schools.com and I'm pretty sure I remember seeing W3C.org state that <menu> should be used for Toolbar menus and listing form control commands.

So, which one should I use for my main menu? Nav, or Menu? Does it matter?

Html Solutions


Solution 1 - Html

nav is used for groups of internal links (a elements). Generally this means the links should travel to separate pages, or change content in the case of an AJAX page. Expect some sort of content change when clicking on a nav item.

menu is used for groups of controls (a, input, button). Generally this means the inputs should perform a function within the page. Expect some sort of javascript interaction when clicking on a menu item.

nav: the navigation for the site.

menu: the menu for a web application.

Solution 2 - Html

Here's an http://html5doctor.com/nav-element/">HTML5Doctor post on nav with a section on how it's different from menu (basically, use it in actual apps). Looks like you want nav.

Solution 3 - Html

With the <menu> it's usually used for context menus.

MDN has good documentation on it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu

Solution 4 - Html

The best place to get this answer is the HTML 5 standards them self.

Menu is defined in HTML 5.1 2nd Edition.

> It, "... represents a group of commands."


Nav is defined in HTML 5.

> It is, "... a section of a page that links to other pages or to parts within > the page: a section with navigation links."

There are notes for nav that I didn't include but think are important, but I think its best for you to get the definition yourself from the standards.

The definitions marked in this post as the answer are close to correct but have extraneous statements in them that make the answer itself wrong.

Solution 5 - Html

<nav> is a section (like <section> or <article>) so it will appear in your HTML document outline. Due to this, I would use <menu> 99% of the time. To me, <nav> is a mix between <section> and <menu>, with the added constriction that <nav> should be used specifically for navigation, whereas <menu> can be for anything that might be called a menu (including a navigation bar). So most navigation bars, despite the fact that they are navigation bars, do not fit the strict requirements of <nav>, and <menu> is more appropriate.

I have never in my web development career found a situation where I wanted my navigation bar to be part of the document outline.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionanon271334View Question on Stackoverflow
Solution 1 - HtmlzzzzBovView Answer on Stackoverflow
Solution 2 - HtmlSu'View Answer on Stackoverflow
Solution 3 - HtmlJackView Answer on Stackoverflow
Solution 4 - HtmlkevinView Answer on Stackoverflow
Solution 5 - HtmlNick ManningView Answer on Stackoverflow