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元素中有一个列表确实增加了意义。

Answer 2

此时，我会保留<ul><li>元素，原因是并非所有浏览器都支持HTML5标记。

例如，我使用<header>标签遇到了一个问题 - Chrome和FF的工作方式就像一个魅力，但是Opera很不自觉。

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

Answer 3

这取决于你。如果您通常使用无序列表来标记导航菜单，那么我会在＆lt; nav＆gt;中继续这样做。元件。＆lt; nav＆gt;的重点例如，元素是将网站的导航标识为计算机阅读器，因此无论您使用列表还是简单的链接都是无关紧要的。

Answer 4

不，它们是等价的。请记住，HTML 5向后兼容HTML 4列表，因此您可以随意使用它们。折衷的是第二版的代码较少。

如果您担心浏览器的向后兼容性，请务必添加this shim以提供<nav>和<article>等标记的功能。

Answer 5

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

Answer 6

我会保留<ul><li>代码，因为新代码（<nav>，<section>，<article>等等）只是{{1}的更多语义版本}}第

出于同样的原因，您不仅要在<div>中加载大量链接，还应该在<div>标记内构建。

Answer 7

对我来说，无序列表是额外的标记，并不是真正需要的。当我查看HTML文档时，我希望它尽可能简洁易读。如果使用适当的缩进，观众已经清楚地看到列表正在呈现。因此，将UL添加到这些标签是不必要的，并且使得阅读文档更加困难。

虽然你可能会获得一些灵活性，但我相信最好不要使用非语义ul类来扩大标记，并一举设计元素的样式。你没有任何借口：使用：before和：after伪选择器。

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

Answer 8

关于这个确切的问题，有关于CSS技巧的非常详细的帖子。这显然是一个激烈争论的问题;这篇文章有超过200条评论。

Navigation in Lists: To Be or Not To Be (CSS Tricks, Jan 2013)

Answer 9

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

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

9 个答案: