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>

我使用有序列表是因为项目之间存在逻辑上的顺序，但每个项目似乎都应该有一个标题。从语义上讲，这段代码是否有意义？我应该使用其他类型的标签来表示列表项的标题吗？我应该放弃列表，仅使用标题标签吗？在这里，最佳实践是什么？

- Joel Micah Donovan

Answer 1

它在任何版本的HTML中都是有效的。但有效性是一个正式的概念，允许各种无意义的东西。

实际上，ol表示一系列带编号的项目。它不是列表的抽象概念，有序序列。例如，段落在逻辑上是一系列语句，并且连续的段落构成了更高级别的序列。甚至单词的字母也是有序序列。我们仍然不使用ol来表示它们。我们使用ol来设置由浏览器生成编号的相当短的项目列表，例如食谱、购物清单或支持某个想法的论据列表。除了长条目不适合作为编号列表呈现之外，没有特定的上限。

因此，如果您的列表项需要标题，那么很可能您不应该使用列表。在实际操作中，如果您将h2用作ol中li的第一个元素，则项目编号默认显示的字体比标题小得多（并且为正常权重，而不是粗体）。每当默认渲染非常奇怪时，您都应该问自己是否正在按照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。(这部分取决于品味和编码风格，也取决于您是否打算使用具有不同含义的内容相似的标记。)

或者，您可以按照HTML5草案使用section标记，但这会导致问题，因为一些旧浏览器根本不识别它，并且它在功能或外观方面没有实际好处(尽管这可能像任何东西一样发生变化)。

使用带有类的div让您轻松地进行样式设置(或在JavaScript中处理)，而无需特殊的默认呈现负担(例如带有边距的编号列表)，您首先需要防止。

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

- Jukka K. Korpela

Answer 2

从语义上讲，这有点多余，但如果它与您的内容相符，那么完全没有问题。

- DA.

---

假设我的CSS从有序列表中删除了编号。这是否意味着我本来就不应该使用有序列表？这些项目以相反的时间顺序表示一个人的工作历史，但我不需要它们被编号。文档中项目的顺序是否足够含义，使我可以删除列表标记而不失去排序语义？ - Joel Micah Donovan

这个问题没有“正确”的答案，但在我看来，是的，你的CSS移除了数字，再加上你使用了适当的H#标签，这就导致了列表本身不再需要。 - DA.

Answer 3

请问一下自己，这是否真的是一个列表。如果是的话，在我看来你所做的是正确的。 同时，也可以查看CSS计数器和编号：http://webdesign.about.com/od/css2/a/aa032807.htm

- Jon P

Answer 4

如果您的列表没有特定的顺序，那么请使用无序列表。您甚至可以考虑使用嵌套列表，但在这种情况下，我建议使用定义列表。

http://jsfiddle.net/SmqFK/

- user1752759

Answer 5

这真的取决于你想要实现什么。HTML主要是用来让页面看起来好看的。不管怎样，对我来说看起来很好。我也喜欢这个小标签。

<ol>
  <li>
      <fieldset>
        <legend><b>The Fist Item:</b></legend>
        a descriptive paragraph
      </fieldset>
  </li>
</ol>

- Ben

---

字段集（Fieldsets）和图例（Legends）主要用于表单布局。 - DA.

我不同意“HTML 就是为了让事情看起来好看”。HTML 的主要目的是语义化地描述数据，而 CSS 则是用来美化页面呈现。 - Steve

我认为 <fieldset> 不太适合。它更适用于交互式表单中的逻辑部分，而不是静态内容。我会使用大量CSS来使这个东西看起来正确，无论我使用哪些元素。我只想让我的元素选择反映出列表的语义意义。如果有帮助的话，在我的情况下，这是一个工作经历列表。每个标题都是公司名称，描述是一个工作的简短解释。 - Joel Micah Donovan

HTML并不仅仅是让页面看起来好看的工具，这是CSS的作用。HTML应该是将文档在语义上分成有意义的部分的工具。 - Jon P