Should I be using nav or ul

Question

I'm making a navigation menu, should I be using the <nav> element or <ul> element for that?

If I use a nav I'll prob need to use a shiv so that it works across browsers.

If that's so, what the advantage of using a nav over a ul?

EDIT:

I know you can put a ul into a nav my question is why use a nav at all?

Answer 1

Just my opinion, I would use a ul simply for the reason that IE 6 and 7 still have a sizable market share, and I know I won't have to jump through hoops to get a ul to work. For now anyway, it's simpler.

Answer 2

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.

Answer 3

nav is an semantic html5-element, which was introduced to point out, that this code is the navigation of your page. For "normal nonsemantic" search engines it makes no difference wether you use ul or nav. They will understand both without problems. At the moment using those semantic elements creates no real advantage for you.

Be careful, using those html5-elements breaks IE, so you need to "register" them, so IE recognizes them as stylable html-elements.

Answer 4

Both nav and ul elements can be used to create menu in html5,

• The nav element communicates that we're dealing with a major navigation block
• The list communicates that the links inside this navigation block form a list of items

However you can use both nav and ul in menu creation,

<nav>
 <ul>
    <li>item 1</li>
    <li>item 2</li>
 </ul>
</nav>

It's upto you whether to choose either nav or ul

Answer 5

You should generally use a list inside a <nav> anyway, like so:

<nav>
  <ul>
    <li>...</li>
  </ul>
</nav>

• http://html5doctor.com/nav-element/

Answer 6

If you want to use nav but avoid any issues with browsers that don't support it, the simplest thing to do is to not apply any styling to it and wrap it around a div and style that instead.

<nav>
    <div class="nav">
        <ul>
            <li><a href="?">List Item Link</a></li>
            <li><a href="?">List Item Link</a></li>
            <li><a href="?">List Item Link</a></li>
        </ul>
    </div>
</nav>