html - 在另一个带有 h1 标签的标题中嵌套 h2 标签在语义上是错误的吗？

Question

在另一个标题 h1 标记中嵌套 h2 标记在语义上是错误的吗？

 <h1 class="fixed">
    <h2 class="absolute">
        Absolute Div
    </h2>
</h1>

score 15 · Accepted Answer

“语义错误”在很大程度上是一个见仁见智的问题（“语义”的意思是“与意义相关”，但这里的意义是什么？），但该结构甚至在句法（形式上）上都不正确。根据所有 HTML 规范和草案，h1元素不得包含h2元素。

关于“副标题”或标题的次要部分的标记，一直存在激烈的争论，特别是关于提议的hgroup元素（这会让你使用h1后跟，h2就好像它是一个单一的标题一样）。实用的方法已经并且仍然是使用标记，例如

<h1 class="fixed">
Primary heading text<br>
<small class="absolute">
Secondary heading text
</small>
</h1>

我在这里保留了你的类名，但他们建议你可能根本不应该使用标题元素。h1元素应该是页面的整体标题，h2元素应该是下一个较低级别的标题，用于页面的顶级部分。

score 1 · Accepted Answer

是的，因为<h>标签是用于标题的，不应该嵌套。

因此，您将标题放在标题中。像往常一样更容易分开：

<h1 class="fixed">
    </h1>
<h2 class="absolute">
    </h2>

score 0 · Accepted Answer

HTML5 标准引用说你不能

https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements 4.3.6 h1, h2, h3, h4、h5 和 h6 元素表示这些元素只能具有短语内容（“inliny things”，如粗体、斜体或链接）：

内容模型：短语内容。

但是 h1-6 本身并不是分句内容：它们是流式内容，是另一个主要类别的“块状事物”，例如段落：

类别：流内容。标题内容。触手可及的内容。

所以你不能嵌套它们。

score -5 · Accepted Answer

是的，您绝对可以嵌套 H 标签，这样做是为了获得最佳页面 SEO 排名。
您要这样做的原因是用正确的标题标签打包页面，但允许显示格式所需的 CSS 数字 H 设置。

你有几个选择：

您所展示的内容是正确的：<h1><h2> Your heading</h2></h1> W3C 验证将与此相符，因此我推荐选项 2，即伪造 W3C 验证和浏览器。

使用带有[custom_headline]标签的 Themco X-Theme。
这是它的工作原理：

[custom_headline type="center" level="h1" looks_like="h2"]Your Heading[/custom_headline]

4 回答 4