Should I be using nav or ul

问题

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?

回答1:

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>

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.

回答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.

回答3:

The nav element is semantically more specific, so generally the better choice. A search engine, for example, will understand that the links within it represent navigation, rather than a simple list of links (which could be recommended posts, or related items etc).

回答4:

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

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

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

回答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.

回答6:

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.

回答7:

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>

回答8:

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

来源：https://stackoverflow.com/questions/9600357/should-i-be-using-nav-or-ul

标签

html

css

cross-browser