我应该在我的<nav>中使用<ul>和<li>吗？

Question

现在我们有了专门的<nav>标签，

这是什么意思：

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

有比以下更好的方法吗？

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

如果我不需要使用额外的DOM级别进行CSS定位和填充，那么什么是首选的方式，以及为什么？

- kikito

---

这是一个好问题... 对于HTML 4无法理解的标签，之前的最佳实践是否适用？ - Guffa

Answer 1

元素和列表提供不同的语义信息:

• 元素表明我们正在处理一个主要导航块

• 列表表明此导航块内的链接形成了一个项目列表

在http://w3c.github.io/html/sections.html#the-nav-element上可以看到，

元素还可以包含散文内容。

因此，在

元素内部使用列表确实会增加意义。

- Thomas Maas

---

非常感谢，这正是我所需要的！此外，robertc关于屏幕阅读器在下方宣布“3个项目列表”的评论非常有用。 - kikito

似乎 UL 标签没有起到任何作用：http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/ - psycho brm

这个链接对我来说似乎是有效的。请确保阅读后续内容，其中宣布列表和非列表为平局。https://css-tricks.com/wrapup-of-navigation-in-lists/ - RobW

在我看来，一个没有 <ul><li> 的 <nav> 似乎会有更多动态的子菜单。如果您有多个菜单列表，它们在 <nav> 中的类型和位置不同，那该怎么办？我会将这些菜单列表分组为 <ul><li> 在 <nav> 中。因此，如果您的菜单是常规的，我会选择使用 <ul><li>。 - wonsuc

Answer 2

< p > < code > nav > a 的清晰标记确实很诱人，但要考虑子菜单和下拉菜单的问题（其他答案中没有提到）。 HTML允许您将一个列表嵌套在另一个列表内，这是一种优雅（并且我敢说，语义化）的结构方式来构建此类菜单：

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a>
        <ul>
            <li><a href="#qux">qux</a></li>
            <li><a href="#quux">quux</a></li>
        </ul>
    </li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

你不能嵌套 a 元素，因此排除了 nav > a，除非你开始用 div 包装内容：

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
    <div>
      <a href="#qux">qux</a>
      <a href="#quux">quux</a>
    </div>
  <a href="#baz">baz</a>
</nav>

一些流行的CSS框架（例如Bulma和Semantic/Fomantic UI）在带有下拉菜单的导航栏中会执行类似操作。所以可以实现，但我觉得有点笨拙。 qux和quux并不像第一个示例中那样嵌套在bar内部。

- Kal

Answer 3

在这一点上，我建议保留<ul><li>元素，原因是并非所有浏览器都支持HTML5标签。例如，我在使用<header>标签时遇到了问题 - Chrome和FF表现得很好，但Opera出现了故障。在所有浏览器完全支持HTML之前，我会将它们放入其中，但依靠旧标签进行向后兼容。

- Demian Brecht

---

使用HTML 5 Shim JavaScript文件（http://remysharp.com/2009/01/07/html5-enabling-script/）来缓解像Opera和IE这样的浏览器可能出现的向后兼容性错误。 - acconrad

但是这样你的网站对于非侵入式脚本不友好 :) - Demian Brecht

你的意思是直到IE8退出市场...就像直到2016年... :) - Šime Vidas

@Šime - 确切地说 :) 而在浏览器中关闭 Javascript 不再是一个选项 ;) - Demian Brecht

@Agent_9191，我今天完全惊讶了，当我想检查一下还有多少人在使用IE7时，猜猜怎么着 - 在大多数国家，使用Opera或iPad Safari等浏览器的人比使用IE7的人更多。我很高兴现在可以放弃对IE7的支持！而IE8迟早会消失。这是我们将不得不面对的最后一个顽固的浏览器（IE9编码起来也不那么糟糕）。 - Camilo Martin

@ŠimeVidas 2016年？IE8目前在IE中占据主导地位，而IE10则幸运地排名第二。 - Brett Ryan

Answer 4

这其实取决于你。如果你通常使用无序列表来标记导航菜单，那么我建议在<nav>元素内继续使用。<nav>元素的目的是为了向计算机读者识别网站的导航，因此使用列表或仅链接并不重要。

- Ian Devlin

---

+1 是因为提到对于屏幕阅读器来说，nav 和 a 现在和列表一样好。 - Camilo Martin

Answer 5

不，它们是等价的。请记住，HTML 5 向后兼容 HTML 4 列表，因此您可以自由地以相同方式使用它们。第二个版本的代码更少，但也有一些权衡。

如果您关心浏览器向后兼容性，请确保包含this shim以提供诸如<nav>和<article>标签的功能。

- acconrad

---

链接列表可以提供额外的语义和可访问性（例如，当您进入导航时，屏幕阅读器会宣布“三个项目的列表”）。 - robertc

@robertc 的屏幕阅读器观点非常好。你应该把它写在答案里！我会将其标记为正确的。无论如何，+1。 - kikito

Answer 6

对我而言，无序列表是不必要的额外标记。当我查看HTML文档时，我希望它尽可能地干净易读。如果使用正确的缩进，观看者已经清楚地知道正在呈现一个列表。因此，在这些a标签中添加UL是不必要的，并且使阅读文档更加困难。

虽然您可能会获得一些灵活性，但我认为最好不要用不语义化的ul类膨胀标记，并一次性样式化a元素。您没有借口：使用:before和:after伪选择器。

编辑：我已经意识到一些ARIA屏幕阅读器将列表与简单的锚标签区分对待。如果您的网站面向残疾人群体，我可能会考虑使用基于列表的方法。

- user1429980

Answer 7

如果我们按照“规定”，那么不需要使用列表来标记您的导航。它们唯一真正的优势是在样式化时提供更好的灵活性。

- Phil.Wheeler

Answer 8

我会保留 <ul><li> 标签，因为新的标签（<nav>、<section>、<article> 等等）只是更语义化的 <div> 版本。

出于同样的原因，你不应该只在一个 <div> 中放置大量链接，它们也应该被结构化地放在 <nav> 标签中。

- whostolemyhat

---

我过去使用 <ul> 而不是在 <div> 中使用大量链接的原因正是因为 <ul> 更具语义化。但现在 <nav> 更具语义化。我感到困惑。 - kikito

<ul>标签比普通的<a>链接更语义化，但<nav>标签比<div>更语义化。 <ul>与<a>的区别是独立于<nav>与<div>的区别。 - whostolemyhat

写HTML时不关注语义不是正确的方式。 - Andrew Marshall

Answer 9

关于这个问题，CSS Tricks 上有一篇非常详细的文章。显然，这是一个备受争议的问题；该文章已经有超过200条评论。

列表中的导航：要还是不要？（CSS Tricks，2013年1月）

- Astrotim

---

这是他们写的跟进文章：https://css-tricks.com/wrapup-of-navigation-in-lists/ - Graham