Html 我应该在 <nav> 中使用 <ul> 和 <li> 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5544885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Should I use <ul>s and <li>s inside my <nav>s?
提问by kikito
The title pretty much explains it.
标题几乎解释了它。
Now that we have a dedicated <nav>tag,
现在我们有了一个专用的<nav>标签，
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>
I mean, assuming that I don't need an extra DOM level for some CSS positioning/padding, what is the preferred way, and why?
我的意思是，假设我不需要用于某些 CSS 定位/填充的额外 DOM 级别，首选方式是什么，为什么？
采纳答案by Thomas Maas
the nav element and the list provide different semantical information:
nav 元素和列表提供不同的语义信息：
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
nav 元素表示我们正在处理一个主要的导航块
该列表表示此导航块内的链接形成了一个项目列表
At http://w3c.github.io/html/sections.html#the-nav-elementyou can see that a nav element could also contain prose.
在http://w3c.github.io/html/sections.html#the-nav-element您可以看到导航元素也可以包含散文。
So yes, having a list inside a nav element does add meaning.
所以是的，在导航元素中包含一个列表确实增加了意义。
回答by Demian Brecht
At this point, I'd keep the <ul><li>elements, reason being that not all browsers support HTML5 tags yet.
在这一点上，我会保留<ul><li>元素，原因是并非所有浏览器都支持 HTML5 标签。
For example, I ran into an issue using the <header>tag - Chrome and FF worked like a charm, but Opera borked.
例如，我在使用<header>标签时遇到了一个问题- Chrome 和 FF 工作起来很有吸引力，但 Opera 却很无聊。
Until all browsers support HTML completely, I'd stick them in, but rely on the old ones for backwards compatibility.
在所有浏览器完全支持 HTML 之前，我会坚持使用它们，但依靠旧浏览器来实现向后兼容性。
回答by Ian Devlin
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.
这真的取决于你。如果您通常使用无序列表来标记导航菜单，那么我会说在 <nav> 元素中继续这样做。例如，<nav> 元素的作用是将站点导航标识到计算机阅读器，因此是使用列表还是简单的链接并不重要。
回答by user1429980
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.
对我来说，无序列表是不需要的额外标记。当我查看 HTML 文档时，我希望它尽可能简洁易读。如果使用适当的缩进，查看者已经很清楚正在呈现一个列表。因此，将 UL 添加到这些 a 标签是不必要的，并且会使阅读文档更加困难。
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.
尽管您可能会获得一些灵活性，但我认为最好不要使用无语义的 ul 类来膨胀标记，并一举设置 a 元素的样式。而且您没有任何借口：使用 :before 和 :after 伪选择器。
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.
编辑：我已经意识到某些 ARIA 屏幕阅读器对待列表的方式与简单的锚标记不同。如果您的网站面向残疾人，我可能会考虑使用基于列表的方法。
回答by Astrotim
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.
关于这个确切的问题，CSS Tricks 上有一篇非常详细的帖子。这显然是一个激烈争论的问题；该帖子有200多条评论。
Navigation in Lists: To Be or Not To Be (CSS Tricks, Jan 2013)
回答by whostolemyhat
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.
我会保留<ul><li>标签，因为新的标签（<nav>，<section>，<article>等）都只是更多的语义版本<div>秒。
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.
出于同样的原因，您不仅会在 a 中加载大量链接<div>，还应该将它们构建在<nav>标签内。
回答by acconrad
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.
不，它们是等价的。请记住，HTML 5 向后兼容 HTML 4 列表，因此您可以在相同方面随意使用它们。第二个版本的权衡是更少的代码。
If you are concerned about backwards compatibility with respect to browsers, make sure to include this shimto provide functionality of tags such as <nav>and <article>.
如果您担心相对于浏览器的向后兼容性，确保包括这个垫片提供的标签功能，如<nav>和<article>。
回答by Phil.Wheeler
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.
如果我们是“按书”说话，那么不；您不需要使用列表来标记您的导航。它们提供的唯一真正优势是在造型时提供更好的灵活性。
