我应该在我的导航里面使用 < ul > s 和 < li > s 吗？

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

49799 次浏览
小开

不，它们是等价的。请记住，HTML5向后兼容 HTML4列表，因此您可以在同样的情况下随意使用它们。第二个版本的代码更少。

如果您担心浏览器的向后兼容性，请确保包含 这个垫片以提供诸如 <nav>和 <article>之类的标记的功能。

小开

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

小开

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

例如，我在使用 <header>标签时遇到了一个问题—— Chrome 和 FF 运行得非常好，但 Opera 却感到厌烦。

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

小开

这真的取决于你。如果您通常使用无序列表来标记导航菜单，那么我建议您在 < nav > 元素中继续这样做。例如，< nav > 元素的目的是识别站点到计算机阅读器的导航，因此无论您使用列表还是仅仅使用链接都是无关紧要的。

小开
最佳答案

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

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

  • 该列表表示此导航块中的链接形成一个项目列表

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

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

小开

我会保留 <ul><li>标记，因为新标记(<nav>、 <section>、 <article>等等)只是 <div>的更多语义版本。

出于同样的原因，您不仅需要在 <div>中加载大量链接，它们还应该在 <nav>标记中进行结构化。

小开

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

尽管您可能会获得一些灵活性，但是我相信最好不要使用非语义 ul 类来膨胀标记，而是一下子对 a 元素进行样式化。而且您没有任何借口: 使用: before 和: after 伪选择符。

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

小开

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

列表中的导航: 生存还是毁灭(CSS 技巧，2013年1月)

小开

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


提交答案