Question

我之前从未使用过列表。我创建了一个超过30 000 LOC的网站，从不使用单个列表元素。但是当我查看其他人说Twitter的源代码时，他们会一直使用列表。使用list-elements有什么好处？大部分时间我都可以使用div-elements在布局方面获得相同的结果

Answer 1

语义。列表中的项目通常与其含义相关，而不仅仅是它们的布局。

Answer 2

如果你正在使用一个表，你正在使用表格进行布局，那么很有可能用一个列表替换

Answer 3

如果列表在语义上是最佳选择，则应使用列表。当您创建一些HTML时，请问自己以下问题：

我列出了一些东西吗？

如果您的答案是肯定的，那么您希望使用list元素，或者如果它是包含两列或更多列相关信息的列表，则表格。

相比之下，使用div创建的项目列表没有任何意义。请参考以下列表示例：

香肠
培根
猪肉
金门

这是猪肉产品清单，通常，您的HTML应如下所示：

<ol>
  <li>Sausages</li>
  <li>Bacon</li>
  <li>Pork</li>
  <li>Gammon</li>
</ol>

这告诉我们和浏览器该列表中的所有项目都是相关的。它们都有一个共同的属性（在这种情况下，它们是猪肉）。但是，如果您要使用此代码：

<div>Sausages</div>
<div>Bacon</div>
<div>Pork</div>
<div>Gammon</div>

这告诉我们（和浏览器）没有关于内容的信息，只是它们存在于页面上。从样式的角度来看（即CSS），它没有太大的区别，甚至可能使生活更轻松，但它是（a）滥用div元素（参见：Divitis）和（b））无法访问，因为屏幕阅读器和其他类似软件不会意识到数据是相关的。您的搜索引擎优化也会受到影响（理论上）。

请记住，它不必只是一个文本数据列表，如上所述。导航链接列表仍然是列表，您应该将其标记为。例如：

<ul class="site-navigation">
  <li><a href="home.html">Home</a></li>
  <li><a href="about.html">About Us</a></li>
  <li><a href="login.html">Log in</a></li>
</ul>

Answer 4

它主要用于创建菜单，但使用div元素可以轻松实现相同的结果。如果它是一个简单的列表，它就更容易控制你的菜单，我认为搜索引擎也更喜欢它们

Answer 5

我和Giles在一起，但想扩大一点。项列表包含语义值。您在页面中列出的任何内容都很可能属于列表。例如：

产品
导航菜单项
分享链接（例如Facebook，Twitter，LinkdIn，reddit等）
此列表本身属于列表：）

另外，想象一下不应用样式或应用不同样式的场景（在移动浏览器上很常见，特别是那些不在最新/高级智能手机上的浏览器），或者如果有人使用Firefox进入View - ＆gt;页面样式并选择无样式。你仍然希望你的页面有意义。如果您在页面上列出项目，您仍然希望它们显示为某种列表，而不仅仅是一堆DIV。除了在单独的容器和布局控件中组织事物之外，DIV没有语义含义。

我什么时候应该在HTML中使用list-element

5 个答案: