在HTML中过度使用有序/无序列表

场景
我正在为一个项目回顾我的一个devs HTML结构，我注意到他使用了一堆

元素来构建主导航。然后我注意到，在其中一页上，他使用了一个表格来构建测验类型的布局

 - Question <radio> <radio> <radio>
 - Question <radio> <radio> <radio>

-问题
-问题:

最后，我看到页脚导航由一堆锚链接组成，这些锚链接被包装在

（我认为还不错）

作为一个完美主义者，我告诉他重构所有这些部分，并将它们放在无序的列表中。我说

这些章节实际上都是事实清单。问题列表、主要导航链接列表和页脚链接列表。因此，您应该使用

他接受得很好，但说“为什么？”你不是在挑战列表的目的吗，它不应该被用于要点吗

我告诉他这是一个很好的问题，但我只是遵循一个普遍的做法和世界其他地方正在做的事情

---

那么在你看来，过度使用列表是一种不好的做法吗？

任何无序的列表都应该在

ul

中

任何有序列表都应位于

ol

中

通过坚持这种做法，语义得到了清晰的体现

---

当然，也有例外。这就是一点常识会有所帮助的地方。例如，可能会有人认为网站的结构是一个大的无序列表（

[页眉、内容、页脚]

），但我不建议这样做。

测验布局对我来说是表格数据。我绝对会把它放到一个表格里，特别是如果单选按钮带有可变长度的文本

至于其他方面，你是对的：清单与“要点”无关。列表元素对于任何类型的对象都是正确的元素，无论默认情况下如何设置样式

一个不太为人所知的HTML元素是

dl

，因为许多东西被放入

ul

s中，在语义上更适合

dl

s。不过，我自己从来没有用过它——我也有把所有东西塞进

ul

s:）的倾向

W3C页面中的一个示例：

<DL>
  <DT>Dweeb
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>
  <DT>Hacker
  <DD>a clever programmer
  <DT>Nerd
  <DD>technically bright but socially inept person
</DL>

德韦布
可能成熟的易激动的年轻人
变成书呆子或极客
黑客
聪明的程序员
书呆子
技术上聪明但社交能力差的人

---

相关：

在HTML4中，使用列表构建导航是一种最佳实践，这不是因为每个人都在这样做，而是因为导航通常是列表本身。它们只是链接列表。（有序列表通常在构建语义表单时也非常有用。）

---

在HTML5中，所有这些都被更具体的

元素取代。这就是它听起来的样子。

它归结为代码的灵活性和持续的管理。列表就是这样，列表。它们适用于内容要点和导航菜单。一些HTML编码人员出于基本格式的目的滥用列表。这是错误的。很容易说任何事情都是一张清单。。。我把我所有的袜子并排放在同一个抽屉里。。。所以他们一定是对的？？不，不是真的

---

将列表的使用保留为标准内容格式或菜单。不要将它们用于一般的页面布局，这只会使您的代码一塌糊涂

无序列表的使用已经完全失控。它们是新桌子。我经常看到它们被使用，只要你有两个或两个以上相似的元素紧随其后。我看到人们把块级元素放在里面。在我的书中，这在语义上是不正确的。这只是一种不成比例的做法。

直言不讳但真实的评论：你是对的，他是错的。相关：@Pekka-但导航链接并不是真正的表格数据。。测验。。好。。也许吧。根据定义，过度使用任何东西都是不好的做法。@Alohci，哇，谢谢你的精彩评论：）谢谢@Pekka！我最终让他将测验布局格式化为文本，并依靠CSS进行定位。我不必把文本放在收音机旁边，所以它是用很少的标记实现的。在这个场景中，我们使用了

，因为它实际上是一个有序列表。过去我主要在FAQ类型的场景中使用定义列表，但我还没有教我的开发人员在适当的时候开始使用它们。@Marko是的，这个定义（作为有序列表）也很有意义。我只是一个表的鉴赏家，每当它们让你省去了一个巨大的布局头疼的时候（并且有一半的语义：）触摸。在我真正开始在真正有意义的地方使用它们之前，我是一个讨厌餐桌的人已经两年多了。我想有一次我甚至用无序列表构建了一个8列的表格布局。我保证我已经改变了。@Marko我也经历过了！哦，噩梦。当你在IE、FF和Chrome中完成它的工作后，你可以在IE6中打开它并重新开始。@Pekka웃's的逻辑没有任何意义——任何东西都可以是一个信息列表。中的示例清楚地显示了

li

用于项目符号/编号列表。而不是页眉和页脚链接等。如果您绝对必须分割一组项目，这就是

div

的作用。正如他们所说，“完美是实现的，不是当没有什么可以补充的时候，而是当没有什么可以带走的时候。”这没有任何意义。仔细想想，任何东西都可以看作是一张清单。HTML标签列表、页面部分列表、组成文章的段落列表。我们需要停止过度使用

li

@马克：我们已经停下来了。这篇文章具有历史意义。你可以看出，当我在3年半前写这篇文章时，我预测我们会转向HTML5中的导航。