为什么我要在我的HTML中使用UL/LI？

Question

我有以下这个结构，在我看来非常好用，我经常使用HTML5：

<div class="drop-menu" data-dropmenu="language">
  <a href="language/pt-pt" class="drop-menu-link">Português <span>(Brasil)</span></a>
  <a href="language/pt-pt" class="drop-menu-link">Português <span>(Portugal)</span></a>
  <a href="language/es" class="drop-menu-link">Español</a>
  <a href="language/en" class="drop-menu-link">English</a>
  <a href="language/ja" class="drop-menu-link">日本語</a>
  <a href="language/it" class="drop-menu-link">Italiano</a>
  <a href="language/de" class="drop-menu-link">Deutsch</a>
  <a href="language/fr" class="drop-menu-link">Français</a>
</div>

如果只是使用A元素作为块状显示，为什么我需要使用列表结构(ULs / LIs)呢？在这种情况下使用列表真的有用吗？我总是这样做，感觉很不错。

- Cainã

---

使用 li 和 ul 不仅更语义化，而且为 HTML 节点赋予了含义，有助于屏幕阅读器、网络爬虫等。 - Andy

难道不和“为什么人们要在路上开车？”是一样的吗？回答是：“因为路是为汽车建造的。”而你的回答则是：“因为<ul>/<li>是用来制作列表的。” - Manse

这种问题往往引起讨论，提出观点和抽象的论证（例如关于某些东西“语义”的），而不是基于事实的技术答案。 - Jukka K. Korpela

@Andy 在网页开发的背景下，更语义化与赋予更多意义是相同的事情。 - Asker

Answer 1

它在语义上更加正确。

您上面所看到的是一组语言的无序列表。要在语义上更加准确，请使用项目的无序列表（UL元素和LI元素）。

这也有助于屏幕阅读器和其他依赖于正确语义的技术正常工作。

- Oded

---

我的一位设计师向我展示了这个网页，因为他在创建导航和菜单时对_CSSed_的UL和UI太上瘾了，以至于无法理解NAV和ARIA。和他一样，我看到许多前端开发人员坚持使用这种在HTML5标准下已不再适用的技术！因此，我想把任何正在研究这个问题的人指向克里斯·科耶尔的文章“列表中的导航：是还是不是”(https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/)。正确的构建网站并不难！ - Julio Marchi

@Julio - 你说得非常正确。我的回答适用于2012年。如今，网络已经发展了许多。现在应该使用导航元素。 - Oded

Answer 2

使用JAWS屏幕阅读器的盲人建议不要使用ul和li元素作为菜单或导航列表。

https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/

如果是某种类型的导航菜单，其选项将引导用户进入新视图/页面，则应将锚点元素嵌套在nav元素中。如果只是非交互式数据的列表，则section或aside元素可能会起作用。

对于带有交互选项但不导致新页面的元素列表（即仅发送get/post请求），不清楚应该将其包装在什么中。我认为在语义上仍然可以使用nav元素（您正在导航页面的数据库/CRUD方面），或者只是section / aside元素仍可以起作用。

很遗憾，对于一个菜单元素只有部分支持 :(

- jamie

Answer 3

此外，若没有使用CSS样式表，您的菜单会像一个句子一样在页面中显示，而不是像一个格式化良好（虽然看起来相对平淡无奇）的列表。

葡萄牙语（巴西）葡萄牙语（葡萄牙）西班牙语英语日语意大利语德语法语

相比之下，使用CSS样式表可以使您的菜单呈现出更好的格式（尽管可能看起来有些乏味）。

- Steve_O

Answer 4

使用列表至少有两个好处。使用列表可以帮助了解您网站的结构，这对于SEO和可访问性非常有好处，因为人们可以使用自定义CSS或屏幕阅读器。第二个与之略微相关的好处是，在创建样式表时它非常有用。您不需要想出自己嵌套元素的方法。只需使用列表即可开始。然后，您可以专注于提供不同的层次级别、第一个、最后一个、奇数或偶数列表项的不同样式，以确保样式表正确无误。此答案中的内容。

- avb

Answer 5

除了Oded的回答，需要特别说明的是你希望语义上正确的原因是为了所有没有使用普通浏览器的网络用户。举个例子，考虑一个使用屏幕阅读器或某种网络爬虫的盲人。

- Joel Cross

Answer 6

为了使您的标记语义化描述，建议使用此方法。由于您的下拉菜单本质上是一个链接到不同语言的无序列表，因此在屏幕阅读器或搜索引擎蜘蛛索引您的网站时，应该告诉它们这一点。

显然，这对菜单的典型呈现或功能没有任何影响（也不需要），因此问题在于您是否关心SEO和可访问性最佳实践。

- Delon

Answer 7

自从HTML 5发布以来，<nav>可用于网站导航块，而不是div。

参考HTML Standard

nav元素表示页面中链接到其他页面或页面内部部分的页面部分：包含导航链接的部分。

HTML标准包括一个使用<nav>、<ul>和<li>的示例。

<nav>
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/events">Current Events</a></li>
   ...more...
  </ul>
</nav>

但它也说

导航元素不一定要包含列表，它还可以包含其他类型的内容。

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
</nav>

根据标准，只要有nav来指示导航，使用ul和li是个人偏好。

- Xitang

Answer 8

人们使用无序列表<ul>和列表项<li>将项目分组在一起。为什么要将HTML标签分组在一起呢？这使开发人员能够将CSS类应用于一个组，而不是每个元素单独应用。

- Bull

---

如果你想通过类似于ol.myclass li a {styles}这样的方式访问链接，如果它们在div内部，你也可以通过相同的方式访问它们，例如：div.myclass a{styles}。 - Delon

Answer 9

标签不仅用于展示（现在可以深度更改），而且还有意义。例如，您几乎可以只使用div和span来创建完整的网页，但这并不意味着这是一个好主意...

您提到了HTML5：他们花费了很大的力气添加了几个具有类似渲染效果但语义含义非常不同的标签。
如上所述，这有助于屏幕阅读器：它们将以不同的方式读取您的代码，尝试将其作为整个句子阅读，同时会以适当的语调和停顿读取真正的列表。
但这也可能有助于Web爬虫（考虑“Google”，但不仅限于此）更好地把握您页面的结构，并更好地索引最重要的部分。

- PhiLho