我应该在导航菜单上使用 `<ul>` 还是 `<div>` [关闭]答案

【问题标题】：Should I use `<ul>` or `<div>` on my navigation menu [closed]我应该在导航菜单上使用 `<ul>` 还是 `<div>` [关闭]
【发布时间】：2019-01-24 09:09:54
【问题描述】：

当我们编写一个没有无序列表的导航菜单时，这是一种不好的做法还是不专业。

例如，改用<div> 标签。

<div class="navbar">
   <a href="#"> Home </a>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

不，这不是问题。使用一堆 div 或使用 <ul> 应该只是外观问题。即使使用<ul> 可以提供一些上下文，它也只能用于设置适当的无序列表的样式，因为我们有更高级的工具来为屏幕阅读器和搜索引擎提供语义。最后，没有理由不使用<ul> 不专业。

那么，我们可以做些什么来避免屏幕阅读器在尝试查找主导航按钮的位置时失败？

好吧，一个好的做法是始终在包含导航按钮的外部 div 中使用 role="navigation"，as stated here。您可以将它与 HTML5 标签 <nav> 结合使用，使其更加清晰并执行更好的 SEO。

这是建议的做法。但是您不必仅仅因为必须使用无序列表。

【讨论】：

很高兴看到有人引用 MDN 而不是简单的 Bootstrap 或 W3Fools。 :-)
@04FS 愿意分享为什么不呢？
@04FS 你是对的，我的回答不够清楚，所以我编辑了它
@CristianTraìna 欢呼，我认为现在读起来更好一些。如今，使用ul 进行导航是一种常见的做法，但你说得对，它的语义有点可疑。它基本上是一个“链接列表”，但对于辅助技术用户来说，使用ul 的实际好处可能相当小。将其包装在 nav 中或在适当的情况下使用 ARIA 属性，在这方面做得更多。

【解决方案2】：

我认为是的，在语义方面这是不好的做法。但是你可以在没有无序列表的情况下实现相同的功能，所以不要太在意这个:)

【讨论】：

欢迎来到 StackoverFlow。我知道您的声誉仍然太低，但这个答案更像是 comment 而不是实际答案。您能否编辑并填写您的答案并添加参考资料、来源并更全面地确立您的主张？干杯

【解决方案3】：

不，不用 ul 写导航菜单也不是不专业。我们可以通过多种方式进行标记。您还可以使用可用于导航的 HTML 5 标记，称为 nav。但是使用 ul 会使流程更容易。

【讨论】：