使用<nav>与<li><a>组合，还是仅使用<nav><a>更好？

Question

<nav>
  <a href="#">Home</a>
  <a href="#">Kontakt</a>
  <a href="#">Jovan</a>
</nav>

或者

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

哪个更好？仅使用 nav 和 <a>，还是后者更好？在第一种情况下，不应将其放置在 CSS 的 <inline> 中。

- jovan922

---

我会选择第二个选项。 - Mr. Alien

我将获得更好的控制，我可以从中设计出一些很棒的东西...即使它符合W3C标准。 - Mr. Alien

考虑将一个好的答案标记为正确 :) - Mr. Alien

Answer 1

根据W3关于<nav>的规范, 任何类型的流内容都是可以接受的。虽然这不是很重要，但W3和MDN都使用<ul>来演示它的用法（值得一提的是，W3甚至在<ul>上方包含一个标题来命名该部分）。

个人认为<ul>比单独的<a>更好地描述了多个链接，但这真的取决于您想如何处理。 <ul>在语义上也更适合于多个链接，而不仅仅是浮动锚点。

- Brad Christie

---

@BradChristie：这就是我的观点。菜单不一定是列表，有序或无序，因此如果不是列表，使用ul来制作菜单是不好的做法... - Johan

@Johan 当然可以，这是一个链接列表（尽管你使用样式格式化它）。通常，该列表没有任何顺序，因此使用UL。 - Michael

@Johan - 我真的很喜欢这个讨论，它让我思考正确语义使用 ul。然而，最终，我仍然坚信 ul 在菜单中是符合语义的。由于列表是“集合中项的枚举”，而菜单肯定是相关链接的集合，因此应该使用 ul 构建菜单。我还与我们的无障碍专家核实了一下，他肯定支持在菜单中使用 ul。这使他在使用屏幕阅读器时更快地浏览菜单。 - Steve

@Johan - 这是他的话：列表使他更容易通过屏幕阅读器进行导航。它们易于跳转和通过制表符进行操作。列表还会宣布内部有多少项，这有助于理解菜单结构。非列表导航只会按顺序读出所有链接。列出的导航会宣布项目计数，并在每个项目后停止。 - Steve

使用列表的另一个有趣原因是可能嵌套菜单项。当然，您可以不使用列表来完成它，但是在使用嵌套列表时，列表提供更大的语义分组。 - Steve

Answer 2

个人而言，我使用列表。我认为这样更好，因为如果需要的话，它可以更加强大。例如，如果您需要嵌入式边框来进行样式设置，很容易在<a>上创建轻边框，在<li>上创建深边框以创建该效果。

然而，与此同时，列表方法可以被样式化，使其与仅使用<a>一样简单。

此外... 两者之间没有可感知的速度差异。

- Michael

Answer 3

这完全取决于您。 <nav> 元素只需要包含主要导航，它不必是列表。但通常使用列表，因为导航菜单往往是一系列项目的列表。

因此，如果您的导航包含一系列项目，则可能应该是一个列表。

- Ian Devlin

Answer 4

从我的角度来看，第一个解决方案是最好的，因为您的菜单是一种导航，使用的代码更少，并且（据我所知）与第二个解决方案一样适合SEO。

<nav>
    <a href="#">Home</a>
    <a href="#">Kontakt</a>
    <a href="#">Jovan</a>
</nav>

如果您在您的 nav 中使用其他元素，例如 ul、ol、h1、table(!) 或其他任何元素，它应该是语义上正确的。因此，如果您的菜单是一个列表，使用 ul 就可以了。如果您只想添加元素以使其更容易进行样式设置，则使用 div 和/或 span。

更新

在评论中进行了一些讨论后：在大多数情况下，菜单是一个列表，那么使用 ul 方法是一个很好的选择。如果您使用 ul，屏幕阅读器更容易导航，根据 Steve 的说法。

- Johan

---

如果你的菜单是一个列表，那么我很好奇，在你看来，什么情况下菜单不是某种形式的列表呢？对我来说，菜单是由两个或更多元素组成的，因此可以等同于列表（或者也许集合是更合适的描述符）。 - Brad Christie

我同意几乎所有的菜单都是某种形式的列表。我不确定你是否同意这个网站（http://www.fantasy-cartography.com/）上的菜单并不是一个列表，尽管他们使用了“ul”方法。但我相信一定有一些情况下菜单并不是一个列表。无论如何，每次我们使用任何类型的元素时，我们都应该考虑它是否是正确的元素以及为什么使用特定的元素。 - Johan

@BradChristie：但我认为将“My maps”部分放在一个nav中可能是个好主意。（仍在谈论上面提到的网站）。你认为“我的地图”在语义上适合放在ul中吗？ - Johan

老实说，没问题。只要顺序不重要，“<ul>”就可以了。我也认为从语义上讲是有道理的（尽管我几乎觉得它应该是“<uc>”（无序集合），这样开发人员在看到“列表”这个词时不会感到那么反感（好像意味着太多了）。） - Brad Christie

用问题回答问题：这是一个导航菜单还是一组内容链接？ - Brad Christie