我应该在<nav> s中使用<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定位/填充,首选方法是什么,为什么？

Answer 1

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

• nav元素传达我们正在处理的主要导航块

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

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

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

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