H1、H2 等在 DL 中是否有效？答案

【问题标题】：Are H1, H2 etc valid inside DLs?H1、H2 等在 DL 中是否有效？
【发布时间】：2012-07-25 21:41:12
【问题描述】：

我可以在定义列表中包含标题元素吗？

例子：

<dl>
 <h4> heading </h4>

 <dt> title </dt> <dd> content </dd>
 <dt> title </dt> <dd> content </dd>
 <dt> title </dt> <dd> content </dd>

 <h4> heading </h4>

 <dt> title </dt> <dd> content </dd>
 <dt> title </dt> <dd> content </dd>
 <dt> title </dt> <dd> content </dd>

</dl>

它似乎在我的浏览器中按预期工作:)

【问题讨论】：

validator.w3.org/#validate_by_input 是权限。
浏览器从来没有严格遵守标准，因此它们不是“有效”的权威。然而，他们可能会规定什么有效或什么被接受。如果我们有真正严格的标准，我想 70% 以上的网络将无法访问。
这就是浏览器错误处理仍然存在的原因。不过，就我个人而言，我宁愿使用有效的代码。

标签： html html-lists html-heading

【解决方案1】：

没有；在dl 中可能有效的只有元素是dd 和dt。

它可能看起来有效的原因是浏览器的错误处理，这是不可预测的，据我所知，大多数情况下都没有记录，因此应该不依赖。

尽管有趣的是，正如 Šime Vidas 在 cmets（下）中指出的那样，Firefox、Chrome、Safari、Opera 和 Internet Explorer 7 和 9 并没有更正结构并允许标题元素保留在 dl 内。这让我觉得很奇怪。

虽然可以容忍，但仍然无效。当然，您是否选择尊重该有效性是可选的。

参考资料：

dl, at the W3.org。

【讨论】：

有趣的是，Firefox 将保持结构完整（H4 并未从 DL 中剥离）。 演示： jsfiddle.net/R5KPq
@ŠimeVidas：真的吗？我真的很惊讶。 Firefox 的所有版本，还是特定版本？
@Anna：什么讽刺？我并没有打算让我写的任何东西都被这样对待，所以，就我而言，不。
@DavidThomas 好吧，听到这种行为是跨浏览器:)（我测试了FF、Ch、Sa、O、IE9、IE7），你会更加惊讶。浏览器似乎并不关心 DL 中的 H4。
@ŠimeVidas: ...我现在对浏览器感到有些失望。 =/

【解决方案2】：

FWIW，你可以在直接输入模式下使用w3c markup validator查看代码sn-ps。

浏览器对糟糕的 html 非常宽容，并且不符合规则，即使它现在可以工作，也可能意味着您的页面/布局会因未来的浏览器更新而中断。

我添加了所需的其他元素来验证您的代码，如下所述。抱怨大卫托马斯所说的确切内容。

 <!DOCTYPE html>
    <html>
        <head>
            <title>asdf</title>
        </head>
        <body>
            <dl>
                 <h4> heading </h4>

                 <dt> title </dt> <dd> content </dd>
                 <dt> title </dt> <dd> content </dd>
                 <dt> title </dt> <dd> content </dd>

                 <h4> heading </h4>

                 <dt> title </dt> <dd> content </dd>
                 <dt> title </dt> <dd> content </dd>
                 <dt> title </dt> <dd> content </dd>
            </dl>
        </body>
    </html>

【讨论】：

【解决方案3】：

您可以添加 2 个 dt 标签，其中一个带有一个类

dt.heading {
  font-weight: bold
}

<dl>
  <dt class="heading">Heading</dt>
  <dt>milk</dt>
  <dd>white discharge</dd>
</dl>

允许您在一个之后有多个，因为多个术语可以具有相似的定义，如果不是相同的定义。同样，您可以有多个，因为一个术语可以有几个不同的含义。即使你正在通过 CSS 改变它的外观，这也不会是一个真正的标题，并且会被搜索引擎等跳过……也许有一个带有 seo 内容的隐藏 h1 标签

【讨论】：

是答案还是问题？