使用<li>而不是<div> </div> </li>创建html“块”

Question

我注意到在Facebook个人资料页面上，左栏（包含About，Photos等的列）是作为有序列表实现的，每个“块”表示为列表项。

在我自己的项目中，我已经完成了这类工作，但创建了同一类的多个<div>。

我无法弄清楚为什么Facebook选择这种方式。

有没有人知道的特别原因？

我认为必须有一些便于了解的优点。

Answer 1

这只是正确的做法。当存在应该像导航一样分组的元素时，将它们放在一个列表中会更清晰。屏幕阅读器，搜索引擎等也可以通过这种方式更好地理解您的内容。您可以通过CSS使事物看起来相同，但是为视障人士，机器人等解释代码的方式是整体体验的关键。

Answer 2

<div>标记只表示包含的元素是某种html块。 <ul><li>标签断言这是一个相关的项目列表。

通常我们认为浏览器将<ul><li>显示为项目符号列表。实际上并没有要求列表是项目符号。

在Twitter Bootstrap中

<ul class="dropdown-menu">
      <li><a href="#">Action</a></li>

代码是否启动下拉菜单。如有必要，Twitter可以将<ul><li>重排为嵌套列表。

Answer 3

使用无序列表作为导航是我已经看过很长时间的事情，直到成为惯例。从我所读到的，它主要是为了简单，语义和组织，但它也允许Textreader导航，更容易访问。

Answer 4

您正在谈论的Facebook页面上的html块基本上是一个导航栏，它是一个链接列表。元素就是这样做的。格式化已经设置了很多样子，使它看起来像正确的按钮。

这是一种惯例，这样做很方便，因为你不必自己在div元素中创建链接。

您可以在W3Schools上阅读更多相关内容：http://www.w3schools.com/css/css_navbar.asp