我应该使用 nav 还是 ul答案

【问题标题】：Should I be using nav or ul我应该使用 nav 还是 ul
【发布时间】：2012-03-24 21:57:09
【问题描述】：

我正在制作导航菜单，我应该使用<nav> 元素还是<ul> 元素？

如果我使用 nav，我可能需要使用 shiv 才能跨浏览器工作。

如果是这样，使用nav 与ul 相比有什么优势？

编辑：

我知道您可以将ul 放入nav 我的问题是为什么要使用nav？

【问题讨论】：

标签： html css cross-browser

【解决方案1】：

nav 元素在语义上更具体，因此通常是更好的选择。例如，搜索引擎会理解其中的链接代表导航，而不是简单的链接列表（可能是推荐的帖子或相关项目等）。

【讨论】：

【解决方案2】：

nav 是一个语义 html5 元素，引入它是为了指出，此代码是您页面的导航。对于“普通的非语义”搜索引擎，您使用ul 或nav 没有区别。他们会毫无问题地理解两者。目前，使用这些语义元素并没有为您带来真正的优势。

小心，使用这些 html5 元素会破坏 IE，因此您需要“注册”它们，以便 IE 将它们识别为可样式化的 html 元素。

【讨论】：

【解决方案3】：

不要与<nav> 和<ul> 混淆。它们都可以一起用于导航菜单。

Nav 是一个 HTML5 标签。如果您在 HTML5 中创建内容，则可以使用 <nav>，因为没有限制，但并非所有浏览器都能正确呈现。

 <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 创建一个无序列表。无序意味着列表中的项目不会按任何特定顺序排列。您可以在 nav 内嵌套一个 ul 元素来放置您的链接。

阅读有关 HTML 标记及其工作原理的更多信息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>

这将创建一个导航栏，您必须添加一些 CSS 样式以使其看起来更好。

以上两个代码将产生相同的结果。唯一的区别是nav 告诉浏览器这个元素是用于导航目的。

【讨论】：

如果我不使用导航，对 SEO 的友好度会降低吗？如果不是，那么我看不到导航的任何优势
@qwertymk 正如我所说，不，没有 SEO 优势（目前），在可预见的将来也不会。

【解决方案4】：

无论如何，您通常应该在<nav> 中使用列表，如下所示：

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

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

【讨论】：

【解决方案5】：

视情况而定，但大多数时候你会同时使用这两种方法。

<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>

两者在语义上都是正确的。

【讨论】：

【解决方案6】：

如果您想使用nav，但要避免不支持它的浏览器出现任何问题，最简单的做法是不对其应用任何样式并将其包裹在div 周围并设置样式。

<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>

【讨论】：

【解决方案7】：

只是我的看法，我会使用 ul 仅仅是因为 IE 6 和 7 仍然拥有相当大的市场份额，而且我知道我不必费劲儿就能让 ul 工作.现在无论如何，它更简单。

【讨论】：

【解决方案8】：

nav 和 ul 元素都可用于在 html5 中创建菜单，

nav 元素表明我们正在处理一个主要的导航块
列表表明此导航块内的链接形成项目列表

但是，您可以在创建菜单时同时使用 nav 和 ul，

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

选择nav还是ul由你决定

【讨论】：