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

使用列表（至少）有两个很好的理由。使用列表可以有助于了解您的网站结构，这是一个好的方面搜索引擎优化，但如果人们使用自定义CSS或屏幕阅读器可访问性原因。第二个和略有关联的是在创建样式表时，它非常有用。你没有需要想出你自己的嵌套元素的方式。只需使用列表从那里开始然后，您可以专注于正确获取样式表为不同的层次级别提供不同的样式，首先，最后，奇数或偶数项目。

来自this的内容回答。

Answer 3

要添加到 Oded 的答案，特别是您希望语义正确的原因是那些没有使用普通浏览器的网络用户。以盲人使用屏幕阅读器或某种网络爬虫为例。

Answer 4

建议将此标记用于语义描述。由于您的下拉菜单实际上是指向不同语言的无序链接列表，因此您应该在屏幕阅读器或搜索引擎蜘蛛索引您的网站时告诉它们。

显然，它不会（或不必）对该菜单的典型表现或功能产生任何影响，因此问题在于SEO和可访问性最佳实践是否是您关注的问题之一。

Answer 5

另外，因为没有CSS，你的菜单就会像句子一样内联......

Português（Brasil）Português（葡萄牙）EspañolEnglish日本语ItalianoDeutschFrançais

...而不是一个格式很好（尽管看起来相当沉闷）的列表。

Answer 6

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

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

尽管如果锚导航元素是某种导航菜单，则应将锚元素嵌套在导航元素中...这是它的选项将引导用户进入新的视图/页面。如果这只是非交互式数据的列表，则也许可以使用section或side元素。

对于不带交互选项但不会导致进入新页面的元素的列表（即，仅发送获取/发布请求），其包装内容不太清楚。我认为nav元素在语义上仍然有意义（您正在浏览页面的数据库/ CRUD方面），或者只是section / aside元素仍然可以工作。

对菜单元素的部分支持可能会很好：（

Answer 7

人们使用<ul>未排序列表和<li>列表项将项目组合在一起。为什么要将html标签组合在一起....这使开发人员能够使用css类将格式应用于一个组...而不是每个元素。

Answer 8

标签不仅适用于演示（无论如何都可以深刻改变），也适用于意义。例如，您几乎可以（？）执行仅包含div和span的完整网页，但这并不意味着它是个好主意......

你提到HTML5：他们花了不少时间添加几个具有类似渲染的标签，但语义含义却截然不同如上所述，这有助于屏幕阅读器：他们将以不同的方式阅读您的编码，或者尝试将其作为整个句子阅读，同时他们将阅读具有适当音调和暂停的真实列表。
但它也可以帮助网络蜘蛛（想想“谷歌”，但不仅仅是）更好地掌握页面结构并更好地索引最重要的部分。

Answer 9

自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元素不必包含列表，它也可以包含其他类型的内容。

<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>

根据标准，只要您有ul表示导航，就可以根据个人喜好使用li和nav。

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

9 个答案: