<Nav> or <Menu> (HTML5)

nav or menu (HTML5)

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.

What is the difference is usage between nav and menu in html5?

Straight from the horse's mouth:

http://dev.w3.org/html5/spec-author-view/interactive-elements.html#menus

The menu element represents a list of commands.

E.g.:

<menu label="File">
   <button type="button" onclick="fnew()">New...</button>
   <button type="button" onclick="fopen()">Open...</button>
   <button type="button" onclick="fsave()">Save</button>
   <button type="button" onclick="fsaveas()">Save as...</button>
</menu>

http://dev.w3.org/html5/spec-author-view/sections.html#the-nav-element

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.

Should I be using nav or ul

Don't get confuses with <nav> and <ul>. They both can be used together for a navigation menu.

Nav is an HTML5 tag. If you are creating something in HTML5 you can use <nav> as there is no restriction, but not all browser will render this correctly.

 <nav>
    <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
    </ul>
</nav>

1. Read about Html 5

Ul creates an unordered list. Unordered means the items in the list will not be in any particular order. You can nest an ul element inside nav to place your links.

Read more about the HTML tags and how they work here.

<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>

This will create a navigation bar you have to put some CSS styles to look it better.

The above both code will produce the same result. The only difference is that nav tells the browser that this element is for navigation purpose s.

HTML5 nav element

Well you could argue that not including html5 tags increases the readability of your html file.

However, for SEO purposes, using html5 tags may assist in your page rank, so that might be a consideration if you are developing for a commercial web page.

In this one particular case, if the purpose of the <li> is not for navigation, then it I doubt you would get any criticism for it.

HTML5 2 menus within nav

As per the HTML 5 specification, <nav> is defined as:

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
list of links to various key parts of a site, but the footer element
is more appropriate in such cases, and no nav element is necessary for
those links.

So <nav>, being block-level-element, should have nested list-items to make as many as navigation elements you want rather than defining the <nav> tag all time to make your navigation.

For Instance,

<nav>
<h1>Title</h1>
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#">Item 02</a></li>
<li><a href="#">Item 03</a></li>
</ul>
</nav>

And by CSS, customize the lists to your needs to make it behave the way you want.

I hope this helps.

HTML5 multi nav tag best practices

I think this is about semantics.

A nav element should wrap items that are part of the same navigation structure.

For example:

<nav id="topNav">  <ul>    <li><a>Home</a>    </li>    <li><a>About</a>    </li>    <li><a>Contact</a>    </li>  </ul></nav>
<nav id="sideNav">  <ul>    <li>Products</li>    <ul>      <li><a>Oranges</a>      </li>      <li><a>Apples</a>      </li>      <li><a>Pears</a>      </li>    </ul>  </ul></nav>
<nav id="socialNav">  <ul>    <li><a>Facebook</a>    </li>    <li><a>Twitter</a>    </li>    <li><a>LinkedIn</a>    </li>  </ul></nav>

---

Related Topics