html - 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 means a numbered list of items .它不是一个列表的抽象概念，一个有序的序列。例如，一个段落在逻辑上是一个陈述序列，连续的段落构成了一个更高层次的序列。甚至一个单词的字母也是一个有序的序列。我们仍然不使用 ol为他们。我们使用 ol使用浏览器生成的编号来列出相当短的项目的逐项列表，例如在食谱或购物 list 或支持某个想法的参数列表中。项目的长度没有特定的上限，除非它们越长，越不适合以编号列表的形式呈现。

因此，如果您的列表项需要标题，则很可能您不应该使用列表。在实际方面，如果您使用 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通过反射(reflect)内容的名称，或通过通用名称，如 section和 subsection . (这部分取决于品味和编码风格，部分取决于您是否打算对具有不同含义的内容使用相似的标记。)

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

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

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