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

Question

据我所知,ul / li是排版特定的标签,旨在将文本格式化为列表(而搜索引擎喜欢语义标签).

这里我的一个大问题是为什么Web Masters更喜欢使用列表解决方案(ul/li),这是一个布局(div)解决方案的明显案例,更喜欢为列表语义标签修改很多样式,使它看起来像一个div解决方案？

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

我问这个是因为,在很多情况下,这对于许多小部件插件都是有效的,这些插件动态地(通过JavaScript)生成html代码,即使某些搜索引擎不支持(或者支持有限) )JavaScript.例如:FlipClockJs,Bootstap组件(轮播,导航,分页)等.

Answer 1

据我所知,ul/li是排版特定标签,旨在将文本格式化为列表(而搜索引擎喜欢语义标签).

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

我在这里的一个重要问题是为什么Web Masters更喜欢使用列表解决方案(ul/li),其中布局(div)解决方案的一个明显的例子

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

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

Answer 2

ul/ ol/li不印刷的标签，他们的语义标签（即有含义的标签）。列表通常用于导航链接和类似列表，因为：

1. 毕竟，从概念上讲——实际上，从语义上讲—— 导航菜单是一个你可能想去的地方的列表；和

2. 无样式版本很容易理解（作为列表）

例如，样式：

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>