HTML 列表项应该包含 <h#> 标签吗？

Question

我想弄清楚这是否是好的编码风格。我知道它是有效的，至少在 HTML5 下，但我想知道它的语义是否符合我的意图。

<ol>
  <li>
    <h2>The First Item</h2>
    <p>a descriptive paragraph</p>
  </li>
  <li>
    <h2>The Second Item</h2>
    <p>a descriptive paragraph</p>
  </li>
  <li>
    <h2>The Third Item</h2>
    <p>a descriptive paragraph</p>
  </li>
</ol>

我正在使用有序列表，因为项目在逻辑上是按顺序排列的，但每个项目似乎都应该有一个标题。从语义上讲，这段代码有意义吗？我应该使用其他类型的标签来表示列表项的标题吗？我应该完全丢弃列表而只使用标题标签吗？这里的最佳做法是什么？

Answer 1

它在任何版本的 HTML 中都有效。但有效性是一个正式的概念，也允许各种胡说八道。

在实践中，ol表示项目的编号列表。它不是一个列表的抽象概念，一个有序的序列。例如，一个段落在逻辑上是一个语句序列，连续的段落在更高层次上构成一个序列。甚至一个单词的字母也是一个有序的序列。我们仍然不使用ol它们。我们使用ol浏览器生成的编号来列出相当短的项目的逐项列表，例如在食谱或购物清单或支持某个想法的参数列表中。项目的长度没有具体的上限，除非它们越长，就越不适合将它们作为编号列表呈现。

因此，如果您的列表项需要标题，则很可能不应该使用列表。在实际方面，如果使用h2作为内的第一个元素li的ol，那么项目编号会默认出现在比标题更小的字体（在正常体重，不加粗）。每当默认呈现非常奇怪时，您应该问问自己是否正在使用 HTML 标记的真正用途。

该示例由标题前面的段落组成。没有实践和理论的原因应该有标记其他不仅仅是h2或者p，除非你需要把一个标题和段落为单位，或整个结构作为一个单元的组合，造型或脚本的目的。如果您需要，请使用div，例如

<div class="foo">
  <div class="bar">
    <h2>The First Item</h2>
    <p>a descriptive paragraph</p>
  </div>
  <div class="bar">
    <h2>The Second Item</h2>
    <p>a descriptive paragraph</p>
  </div>
  <div class="bar">
    <h2>The Third Item</h2>
    <p>a descriptive paragraph</p>
  </div>
</div>

用反映内容的名称替换foo和bar，或用section和等通用名称替换subsection。（这部分取决于品味和编码风格，部分取决于您是否打算对具有不同含义的内容使用类似的标记。）

或者，您可以section根据 HTML5 草稿使用标记，但它会导致问题，因为一些旧浏览器根本无法识别，并且它在功能或外观方面没有实际好处（尽管这与任何事情一样，可能会改变）。

div与类一起使用可以让您轻松设置它们的样式（或在 JavaScript 中处理它们），没有您首先需要防止的特殊默认呈现（作为带有边距的编号列表）的负担。

如果您希望对项目进行编号，最可靠的方法是最明显的方法：将数字放入标题中，例如<h2>1 The First Item</h2>。如果您认为创作的灵活性，即重新排序部件、添加和删除部件的可能性，而无需手动更改数字，足够重要以证明旧浏览器中缺少数字，您可以使用 CSS（自动编号和生成的内容) 插入数字数字。