我为什么要在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>

那么,为什么我应该使用列表结构(ULs/LIs),如果仅显示为块的元素可以完成工作？在这种情况下使用列表真的很有用吗？我总是喜欢这样,看起来很棒.

Answer 1

它在语义上更正确.

你上面的是一个无序的语言列表.你应该用项目的无序列表(UL以元素LI的元素)是关于它的语义正确.

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

Answer 2

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

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

虽然你应该将锚元素嵌套在导航元素中，如果它是某种导航菜单......那是它的选项将引导用户到新的视图/页面。如果它只是一个非交互式数据的列表，那么一个 section 或 aside 元素可能会起作用。

对于具有不会导致新页面的交互选项的元素列表（即只发送一个获取/发布请求），它不太清楚将它包装在什么中。我认为导航元素在语义上仍然有意义（你是导航页面的数据库/CRUD 方面），或者只是一个部分/旁边元素仍然可以工作。

有一个菜单元素的部分支持，这将是很好的 :(