我应该在我的 <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>

假设某些 CSS 定位/填充不需要额外的 DOM 级别，首选方法是什么，为什么？

原文由 kikito 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

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

原文由 Thomas Maas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 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 ，除非您开始将内容包装在 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/Semantic UI）为带有下拉菜单的导航栏做类似的事情。所以它可以完成，但对我来说感觉有点笨拙。 qux 和 quux 并没有真正嵌套在 bar 中，就像它们在第一个示例中一样。

原文由 Kal 发布，翻译遵循 CC BY-SA 4.0 许可协议