是否有理由在 <nav> 中使用 <ul>？ [复制]答案

【问题标题】：Is there a reason to use <ul> inside of <nav>? [duplicate]是否有理由在 <nav> 中使用 <ul>？ [复制]
【发布时间】：2015-04-29 09:40:39
【问题描述】：

我知道新的 HTML5 nav 元素用于创建导航菜单...显然...但是每当我看到有人使用它时，他们往往会在其中放入 ul，如下所示：

     <nav>
        <ul>
            <li><a href=#>Item A</a></li>
            <li><a href=#>Item B</a></li>
            <li><a href=#>Item C</a></li>
        </ul>
    </nav>

有必要吗？这样做有优势吗？有什么理由不写：

     <nav>
        <a href=#>Item A</a>
        <a href=#>Item B</a>
        <a href=#>Item C</a>
     </nav>

否则，为什么还要将ul 包装在nav 中？重点是什么？只是为了让你的标记更“语义化”？为什么不单独使用ul？

【问题讨论】：

语义基本上就是归结为。 <ul> 声明有多个相互独立的选项。
这只是某些人的偏好。您是对的，通常是不必要的……但不是必需的。我大多数时候自己使用 UL 和 div 而不是导航
投票结束我自己的问题，绝对是重复的，之前找不到另一个。
好书 - html5doctor.com/nav-element
它的“原因”是它添加了可以用 CSS 定位的结构来改变菜单的外观。如果您不需要这样做，那么添加的标记将是多余的。如果您向任何代码添加任何内容是因为您“应该”而不是因为您需要，那么您已经偏离了轨道。编写实现目标的代码，而不是实现预期的期望。

标签： css html

【解决方案1】：

对于 html5 来说，对于这种语义解决方案进行了大量讨论，这确实是一段艰难的时期。主要有两点：

导航实际上是某种无序列表。

但导航也可能更复杂（标题，uls 内 uls）。所以nav 元素不能诱导ul 元素（就像<menu> 元素一样）......

例如：

<nav>
    <h3>Main navigation</h3>
    <ul><li>...</li></ul>
    <a href="registernow.php">Register</a>
    <h4>Sub navigation</h4>
    <ul><li>...</li></ul>
</nav>

在这种情况下，导航要比简单的ul复杂得多。

总结：在nav 内部可以有多个列表、多个链接、标题，...，尤其是单个ul。

看看关于 css 技巧的热门讨论。该解决方案有很多赞成票和反对票...但毕竟解决方案现在已成为语义事实:)。

导航与菜单：<nav> or <menu> (HTML5)
关于css技巧的精彩讨论：https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/
列表中的导航总结：https://css-tricks.com/wrapup-of-navigation-in-lists/

【讨论】：