我应该在
现在我们有了一个专用的
这
<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 定位/填充，那么首选方法是什么，为什么？
Now that we have a dedicated <nav> tag,
Is this:
<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>
any better than the following?
<nav>
<a href="#foo">foo</a>
<a href="#bar">bar</a>
<a href="#baz">baz</a>
</nav>
Assuming that I don't need an extra DOM level for some CSS positioning/padding, what is the preferred way, and why?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
nav 元素和列表提供不同的语义信息：
nav 元素传达我们正在处理一个主要导航块
The列表传达此导航块内的链接形成项目列表
位于 http://w3c.github.io/html/sections.html#the-nav-element 你可以看到 nav 元素可以还包含散文。
所以，是的，在 nav 元素中包含一个列表确实会增加意义。
the nav element and the list provide different semantical information:
The nav element communicates that we're dealing with a major navigation block
The list communicates that the links inside this navigation block form a list of items
At http://w3c.github.io/html/sections.html#the-nav-element you can see that a nav element could also contain prose.
So yes, having a list inside a nav element does add meaning.
nav > 的更清晰标记a 当然很诱人，但请考虑子菜单和下拉菜单的问题（其他答案中未提及）。 HTML 允许您将一个列表嵌套在另一个列表中，这是一种构造此类菜单的优雅（我敢说，语义）方式：您不能嵌套
a元素，因此排除了 <代码>导航> a，除非你开始将内容包装在div中：一些流行的 CSS 框架（如 Bulma 和 Semantic/Semantic UI）会对带有下拉菜单的导航栏执行类似的操作。所以这是可以做到的，但对我来说感觉有点笨拙。
qux和quux并不像第一个示例中那样真正嵌套在bar内部。The cleaner markup of
nav > ais certainly tempting, but consider the question of submenus and dropdown menus (something not mentioned in the other answers). HTML allows you to nest one list inside another, which is an elegant (and dare I say it, semantic) way of structuring such a menu:You can't nest
aelements, so that rules outnav > a, unless you start wrapping stuff indivs:Some popular CSS frameworks (like Bulma and Semantic/Fomantic UI) do something like this for navbars with dropdowns. So it can be done, but it feels kinda clunky to me.
quxandquuxaren't really nested inside ofbarlike they are in the first example.这真的取决于你。如果您通常使用无序列表来标记导航菜单，那么我建议您继续在
It's up to you really. If you usually used an unordered list to markup your navigation menu, then I'd say continue to do so within the <nav> element. The point of the <nav> element is to identify the navigation of the site to a computer reader for example, so whether you use a list or simply links is immaterial.
此时，我将保留
元素，原因是并非所有浏览器都支持 HTML5 标签。例如，我在使用
标签时遇到了一个问题 - Chrome 和 FF 工作得很好，但 Opera 却无法使用。在所有浏览器完全支持 HTML 之前，我会将它们保留下来，但依靠旧浏览器来实现向后兼容性。
At this point, I'd keep the
<ul><li>elements, reason being that not all browsers support HTML5 tags yet.For example, I ran into an issue using the
<header>tag - Chrome and FF worked like a charm, but Opera borked.Until all browsers support HTML completely, I'd stick them in, but rely on the old ones for backwards compatibility.
不，它们是等价的。请记住，HTML 5 向后兼容 HTML 4 列表，因此您可以在相同方面随意使用它们。代价是第二个版本的代码更少。
如果您担心浏览器的向后兼容性，请确保包含此垫片 提供诸如
No, they are equivalent. Remember, HTML 5 is backwards compatible with HTML 4 lists, so you can feel free to use them in the same regard. The trade off is less code for the 2nd version.
If you are concerned about backwards compatibility with respect to browsers, make sure to include this shim to provide functionality of tags such as
<nav>and<article>.对我来说，无序列表是额外的标记，并不是真正需要的。当我查看 HTML 文档时，我希望它尽可能干净且易于阅读。如果使用正确的缩进，查看者已经清楚地看到正在呈现的列表。因此，将 UL 添加到这些 a 标签是不必要的，并且会使阅读文档变得更加困难。
尽管您可能会获得一些灵活性，但我相信最好不要使用无语义的 ul 类来使标记膨胀，并一次性设置 a 元素的样式。你没有借口：使用 :before 和 :after 伪选择器。
编辑：我知道一些 ARIA 屏幕阅读器对待列表的方式与简单锚标记的方式不同。如果您的网站面向残疾人，我可能会考虑使用基于列表的方法。
For me, the unordered lists are extra markup that aren't really required. When I look at an HTML document, I want it to be as clean and easy to read as possible. It's already clear to the viewer that a list is being presented if proper indentation is used. Thus, adding the UL to these a tags is unnecessary and makes for reading the document more difficult.
Although you may gain some flexibility, I believe it's a better idea to not bloat the markup with unsemantic ul classes and to style the a elements in one fell swoop. And you have no excuse: use the :before and :after pseudo-selectors.
Edit: I have been made aware that some ARIA screen readers treat lists differently than simple anchor tags. If your website is geared towards disabled people, I might consider using the list-based approach.
如果我们是“照章办事”，那就不行；您不需要使用列表来标记您的导航。它们提供的唯一真正优势是在造型时提供更好的灵活性。
If we're talking "by the book", then no; you don't need to use lists to mark up your navigation. The only real advantage they offer is to provide a better degree of flexibility when styling.
我会保留
标签，因为新标签 (出于同样的原因，您不仅仅在
中包含大量链接，它们还应该在I'd keep the
<ul><li>tags, because the new tags (<nav>,<section>,<article>and so on) are just more semantic versions of<div>s.For the same reason you wouldn't just have a load of links in a
<div>, they should also be structured inside a<nav>tag.CSS Tricks 上有一篇关于这个确切问题的非常详细的文章。这显然是一个备受争议的问题；该帖子有超过 200 条评论。
列表导航：是或不是（CSS 技巧，2013 年 1 月）
There is a really detailed post on CSS Tricks about this exact question. It is obviously a hotly debated issue; the post has over 200 comments.
Navigation in Lists: To Be or Not To Be (CSS Tricks, Jan 2013)