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来设置包含浏览器生成的编号的相当短项目的逐项列表，如在食谱或购物清单或支持创意的参数列表中。项目的长度没有特定的上限，除非它们获得的时间越长，它们越适合将它们作为编号列表呈现。

因此，如果您的列表项需要标题，则可能不应该使用列表。在实际方面，如果您使用h2作为li的{{1}}内的第一个元素，则默认情况下，项目编号将显示为比标题小得多的字体（和正常体重，不粗体）。每当默认呈现非常奇怪时，您应该问自己是否正在使用HTML标记，就像真正意图使用它一样。

该示例包含以标题开头的段落。除了你需要将标题和段落的组合作为单位或整个结构作为一个单元处理之外，没有实际或理论上的理由为什么它应该只有ol或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等通用名称。（这部分取决于品味和编码风格，部分取决于您是否打算对具有不同含义的内容使用类似的标记。）

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

在类中使用section可以让您轻松设置它们的样式（或在JavaScript中处理它们），而不需要首先需要阻止的特殊默认呈现（作为带边距的编号列表）。

如果您想要对项目进行编号，最强大的方式是最明显的方式：将数字放入标题中，例如div。如果您认为创作的灵活性，即重新排序部件的可能性，添加和删除部件，而无需手动更改数字，这对于证明在最旧的浏览器中缺少数字是很重要的，您可以使用CSS（自动编号和生成的内容））插入数字编号。

Answer 2

在语义上它有点多余，但如果它对你的内容有意义，那就完全没问题了。

Answer 3

问问自己这是不是真的是一个清单。如果是这样，在我看来你做的很好。另请参阅CSS计数器和编号：http://webdesign.about.com/od/css2/a/aa032807.htm

Answer 4

如果您的列表不是特定顺序，则使用无序列表。您甚至可以考虑使用嵌套列表，但在这种情况下，我会使用定义列表。

http://jsfiddle.net/SmqFK/

Answer 5

这取决于你想要完成的事情。 HTML就是让事情变得美好。无论如何，对我来说似乎没问题。我也喜欢这个小标签。

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

HTML列表项是否应包含<h＃>标签？</h＃>

5 个答案: