Should I be using nav or ul

Question

I\'m making a navigation menu, should I be using the

element or

element for that?

If I use a nav I\'ll

Answer 1

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 2

Depends on the case but most of the time you'll be using both.

<nav>
    <ul>
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
        <li><a href="#">item4</a></li>
        <li><a href="#">item5</a></li>
    </ul>
</nav>

<!-- Or just links -->

<nav>
    <a href="#">Item</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
</nav>

Both are semantically correct.

Answer 3

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 4

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>

Answer 5

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 6

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

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

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