Question

据我所知ul / li是特定于排版的标签，旨在将文本格式化为列表（而搜索引擎喜欢语义标签）。

我的重要问题是为什么Web Masters更喜欢使用列表解决方案（ul / li），这是一个布局（div）解决方案的明显案例，更喜欢修改列表语义标签的大量样式，使其看起来像一个div解决方案？

它们只是使用错误还是我错过了重要的事实？

我问这个是因为，在很多情况下，这对于很多野外的小部件插件都是有效的，这会动态生成html代码（通过JavaScript），即使有些搜索引擎不在支持（或支持有限）JavaScript。例如：FlipClockJs，Bootstap组件（轮播，导航，分页）等。

Answer 1

据我所知，ul / li是特定于排版的标签，旨在将文本格式化为列表（搜索引擎喜欢语义标签）。

他们不是。它们是语义元素，表示内容是一组列表项，其中订单不是特别重要。

我的重要问题是Web Masters为什么更喜欢使用列表解决方案（ul / li），这是布局（div）解决方案的一个明显案例

Div与布局无关。布局是CSS的工作。应该根据它们传达的语义选择使用的元素，然后应该将CSS应用于它们以提供所需的渲染。

div元素是最后的元素。它没有语义，应该在HTML没有具有适当内容语义的元素时使用。

Answer 2

ul / ol / li不是排版标记，它们是语义标记（具有含义的标记））。列表通常用于导航链接和类似列表，因为：

从概念上讲 - 确实，语义 - 导航菜单毕竟是你想去的地方列表;以及
无样式版本很容易理解（作为列表）

，例如：样式：

ul {
  display: inline-block;
}
li {
  display: inline-block;
  border: 1px solid black;
}
li > a {
  display: block;
  cursor: pointer;
  text-decoration: none;
  padding: 1px;
}
li > a:hover {
  background-color: #eee;
}

<ul>
  <li><a href="#this">This</a></li>
  <li><a href="#that">That</a></li>
  <li><a href="#the-other">The other</a></li>
</ul>

无样式：

<ul>
  <li><a href="#this">This</a></li>
  <li><a href="#that">That</a></li>
  <li><a href="#the-other">The other</a></li>
</ul>

Answer 3

我之前从未考虑过列表具有排版特征的想法，但这个问题让我想知道列表是否不适合布局。 HTML5规范并没有说出任何我能立即发现同意的内容，但有一个放在the li specification中：

虽然它符合li中的包含标题元素（例如h1）元素，它可能不会传达作者的语义 的意即可。标题会开始一个新的部分，因此列表中的标题 隐式将列表拆分为跨越多个部分。

这引起了对列表是否适合所有布局情况的质疑。如果您使用列表来显示一组产品，并且这些产品是使用分段元素编写的，那么它是否会将它们置于上面引用所引发的问题之下？

Answer 4

列表适用于定义分层导航和子菜单项。在这种情况下，它们是优选的，因为它可以更容易用造型来定位它们。网站管理员也更喜欢使用列表，因为它们对于屏幕阅读器来说是可访问性的。但是，现在<nav>也可以友好访问。我可能是这里唯一的魔鬼倡导者，他们说他们不像过去那样重要。即使是语义标记。

为什么网站管理员使用`ul / li`而不是`div`s进行布局？

4 个答案: