什么时候在HTML中使用列表元素

如何解决什么时候在HTML中使用列表元素

| 我以前从未使用过清单。我创建了一个拥有超过30000 LOC的网站，并且从未使用过单个列表元素。但是，当我查看其他源代码时，Twitter总是使用列表。使用列表元素的好处是什么？在大多数情况下，就布局而言，我可以使用div-elements获得相同的结果     

解决方法

        语义学。列表中的项目通常根据其含义而不仅仅是其布局而相关。     ,        如果您使用的表格只有一列，则很可能使用表格进行布局，这很可能会被列表取代     ,        当它们在语义上是最佳选择时，应使用列表。在创建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>

    ,        它主要用于创建菜单，但是使用div元素可以轻松实现相同的结果。 如果列表很简单，控制菜单就更容易了，我认为搜索引擎也更喜欢它们     ,        我和Giles在一起，但想扩大一点。项目列表具有语义价值。您在页面中列出的所有内容很可能都属于列表。例如： 产品展示 导航菜单项 共享链接（例如Facebook，Twitter，LinkdIn，reddit等） 此列表本身属于列表：) 另外，请设想一种场景，其中不应用样式或应用样式不同（在移动浏览器中非常常见，尤其是在最新/高级智能手机上不常见），或者如果使用Firefox的人进入“视图”->“页面样式”并选择“无样式”。您仍然希望页面有意义。如果您要在页面上列出项目，则仍希望它们显示为某种列表，而不仅仅是一堆DIV。 DIV除了将事物组织在单独的容器和布局控件中之外，没有语义上的含义。