16

我有以下对我来说似乎非常好的结构，我总是使用 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">日本語&lt;/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）呢？在这种情况下使用列表真的有用吗？我总是这样，而且看起来很好。

4

9 回答 9

15

它在语义上更正确。

您上面的内容是语言的无序列表。您应该使用项目的无序列表（UL带有元素的LI元素）在语义上是正确的。

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

于 2012-11-16T12:48:39.623 回答
7

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

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

尽管如果它是某种导航菜单，您应该将锚元素嵌套在 nav 元素中......但它的选项将引导用户进入新的视图/页面。如果它只是一个非交互式数据的列表，那么也许一个部分或旁边的元素会起作用。

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

对菜单元素有部分支持，这会很好:(

于 2018-09-27T15:33:41.543 回答
3

还因为，如果没有 CSS，您的菜单会像句子一样呈现内联...

Português（巴西） Português（葡萄牙） Español 英语 日本语 Italiano Deutsch Français

...而不是一个格式很好（虽然看起来很乏味）的列表。

于 2014-04-30T14:39:05.857 回答
2

使用列表有（至少）两个很好的理由。使用列表可以帮助您了解您的网站结构，这在 SEO 方面是好的，但如果人们出于可访问性原因使用自定义 CSS 或屏幕阅读器，也是如此。第二个稍微相关的一点是，它在创建样式表时很有帮助。您不需要想出自己的嵌套元素方式。只需使用列表并从那里开始。然后，您可以专注于使样式表正确，为不同的层次结构级别、第一个、最后一个、奇数或偶数列表项提供不同的样式。

此答案的内容。

于 2012-11-16T12:50:28.527 回答
2

要添加到Oded的答案，特别是您想要在语义上正确的原因是针对所有不使用普通浏览器的网络用户。以使用屏幕阅读器或某种网络爬虫的盲人为例。

于 2012-11-16T12:51:19.563 回答
2

建议这样做是为了使您的标记在语义上具有描述性。由于您的下拉菜单本质上是指向不同语言的链接的无序列表，因此您应该在屏幕阅读器或搜索引擎蜘蛛为您的网站编制索引时告诉它们。

显然它不会（或不需要）对该菜单的典型呈现或功能产生任何影响，因此问题是您是否关心 SEO 和可访问性最佳实践。

于 2012-11-16T12:53:01.853 回答
1

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

于 2012-11-16T12:57:13.747 回答
1

标签不仅用于表示（无论如何今天可以进行深刻的改变），而且还用于意义。div例如，您几乎可以（？）只用and做一个完整的网页span，但这并不意味着它是一个好主意......

你提到了 HTML5：他们不遗余力地添加了几个具有相似渲染但语义非常不同的标签。
如上所述，这有助于屏幕阅读器：他们会以不同的方式阅读您的编码，可能会尝试将其作为一个完整的句子阅读，而他们会以适当的语气和停顿阅读真实的列表。
但它也可能有助于网络蜘蛛（想想“谷歌”，但不仅如此）更好地掌握页面的结构并更好地索引最重要的部分。

于 2012-11-16T13:06:51.617 回答
0

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

参考HTML 标准

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指示导航。

于 2020-10-26T21:19:32.153 回答