130

现在我们有了一个专用<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 定位/填充，那么首选方式是什么，为什么？

4

9 回答 9

72

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

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

  • 该列表传达此导航块内的链接形成项目列表

在http://w3c.github.io/html/sections.html#the-nav-element您可以看到 nav 元素也可以包含散文。

所以是的，在 nav 元素中有一个列表确实增加了意义。

于 2011-04-05T09:38:38.083 回答
3

对我来说，无序列表是不需要的额外标记。当我查看 HTML 文档时，我希望它尽可能干净且易于阅读。如果使用适当的缩进，查看者已经清楚地显示了一个列表。因此，将UL添加到这些a标签是不必要的，并且使阅读文档更加困难。

尽管您可能会获得一些灵活性，但我相信最好不要使用无语义的 ul 类来膨胀标记并一举为 a 元素设置样式。而且你没有借口：使用 :before 和 :after 伪选择器。

编辑：我已经意识到一些 ARIA 屏幕阅读器对列表的处理方式与简单的锚标记不同。如果您的网站面向残疾人，我可能会考虑使用基于列表的方法。

于 2012-06-21T17:56:13.523 回答
3

在这一点上，我会保留<ul><li>元素，原因是并非所有浏览器都支持 HTML5 标签。

例如，我在使用<header>标签时遇到了一个问题——Chrome 和 FF 的工作就像一个魅力，但 Opera 很糟糕。

在所有浏览器完全支持 HTML 之前，我会坚持使用它们，但要依赖旧浏览器来实现向后兼容性。

于 2011-04-04T22:09:07.037 回答
2

这真的取决于你。如果您通常使用无序列表来标记导航菜单，那么我会说在 <nav> 元素中继续这样做。<nav> 元素的意义在于识别网站对计算机阅读器的导航，因此您使用列表还是简单的链接并不重要。

于 2011-04-05T08:22:10.500 回答
2

更清洁的标记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，除非您开始将内容包装在divs 中：

<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在第一个示例中。

于 2021-04-01T05:53:02.587 回答
1

关于这个确切问题的 CSS Tricks 上有一篇非常详细的帖子。这显然是一个备受争议的问题；该帖子有超过200条评论。

列表中的导航：存在或不存在（CSS 技巧，2013 年 1 月）

于 2013-11-30T23:59:00.507 回答
1

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

出于同样的原因，您不仅会在 a 中有大量链接<div>，它们也应该在<nav>标签内结构化。

于 2011-04-05T10:46:46.430 回答
1

不，它们是等价的。请记住，HTML 5 向后兼容 HTML 4 列表，因此您可以随意在相同方面使用它们。权衡是第二版的代码更少。

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

于 2011-04-04T22:08:34.007 回答
1

如果我们说的是“按书本”，那么不；您不需要使用列表来标记您的导航。它们提供的唯一真正优势是在造型时提供更好的灵活性。

于 2011-04-04T22:08:45.183 回答