我们应该把 <ul> 标签放在 <nav> 标签里面吗？答案

【问题标题】：Should we put <ul> tag inside <nav> tag?我们应该把 <ul> 标签放在 <nav> 标签里面吗？
【发布时间】：2012-07-27 18:28:34
【问题描述】：

我想知道很多网站把标签放在标签里面，从规范来看，导航标签有锚标签，这里是w3schools的例子，为什么很多网站是这样的：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

这是正确的还是我们应该这样做

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
</nav>

【问题讨论】：

Should I use <ul>s and <li>s inside my <nav>s?的可能重复

标签： html nav

【解决方案1】：

一般来说，这不是必需的，但是将导航项放在列表中并使用 CSS 将它们内联显示（如果需要）是非常常见的做法。这不仅是对 HTML5 的建议——如果您在浏览器中禁用示例 CSS，您的菜单将显示为：

开始关于我的联系方式（你能读懂这个吗？）

列表如下：

开始
关于我
联系方式

考虑一下，如果显示设计出现问题，您希望看到哪个版本。

【讨论】：

【解决方案2】：

这里需要注意的重要一点是导航、部分、页眉、页脚等新标签的设计目的。就其本身而言，这些标签的行为与 div 没有什么不同。人们开始在他们的 html5 网站上使用它们的原因是为文档提供上下文。当我听到“Web 2.0”之类的术语时，我会翻白眼，但这些术语确实传达了我们对如何使用 Web 的思考方式的变化。每当你听到“Web 3.0”……呃，它真正的意思是人们正在尝试思考如何让 Web 更加语义化，这意味着用户体验更加基于用户行为和偏好进行定制。使用这些类型的标签标记您的文档有助于提供该上下文。但是，如何实现它仍然取决于您，我相信您提供的两个示例都是完全有效的。

这里有一篇不错的文章更详细地讨论了这一点：

http://html5doctor.com/lets-talk-about-semantics/

【讨论】：

【解决方案3】：

我一直认为，任何纯粹为了容纳另一个单一标签而存在的标签都是无关紧要的。

然而语义和合理的标记是一门不精确的科学，所以人们有不同的看法。

【讨论】：

【解决方案4】：

根据“nav”元素规范，它表示页面的一个部分，该页面链接到其他页面或页面中的部分。规范不要求“导航”元素中的任何特定结构。另一方面，“ul”块出于逻辑和/或实际目的将导航链接组合在一起。使用导航块列表对使用辅助技术浏览 Web 的用户有好处，因为屏幕阅读器可能会跳过整个导航块，从一个导航级别跳到另一个导航级别。

参考资料：

【讨论】：

【解决方案5】：

我会说：是的，如果是多级导航（因此将对其进行分层排序）。不，在所有其他情况下：您可以节省数据、提高速度和可读性。

恕我直言，UL 应该用于显示实际的无序列表，表格也是如此，应该显示表格数据。

【讨论】：