HTML5 是否允许标题（如 h1）内的块级元素（如 div）？

Question

我总是会说不，但后来我从Semantic UI（和Fomantic UI）看到了这段代码，这是一个非常流行的前端框架：

<h2 class="ui icon header">
  <i class="settings icon"></i>
  <div class="content">
    Account Settings
    <div class="sub header">Manage your account settings and set e-mail preferences.</div>
  </div>
</h2>

代码让我觉得不寻常有两个原因：(1) <i> 标签已被重新用作图标的通用挂钩，以及 (2) 嵌套在 <h2> 内的 <div>元素。我质疑第一个的语义，以及第二个的有效性。

现在我认为该代码适用于所有主流浏览器，或者他们不会使用它，但它似乎并不符合习惯。更重要的是，它是否有效？

---

注意：我在问题中使用了“块级元素”一词（每个人都理解），但正如MDN docs 指出的那样：

在 HTML 中使用了块级元素与内联元素的区别 规格高达 4.01。在 HTML5 中，这种二进制区别是 替换为一组更复杂的content categories。 而“内联”类别大致对应于 phrasing content, “块级”类别不直接对应任何 HTML5 内容类别，但 结合了“块级”和“内联”元素 一起对应flow content 在 HTML5 中。

Answer 1

这是令人讨厌的代码，完全不符合规范。在 h2 中，您只能有 内联元素 短语内容元素，例如 span、strong、em 等。<i> 标签经常被使用不过对于图标，所以没什么令人震惊的。但是divs ...？坏得令人震惊。将它们切换为<span>，代码将有效。

这是 h1、h2 等可以包含的官方规范。所谓“措辞内容”：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#phrasing_content

编辑：MDN 不是官方规范，正如 cmets 中的原始海报所指出的那样。但是，它基于官方规范。 HTML 的权威来源据说是来自 Web 超文本应用技术工作组 (WHATWG) 的 HTML 生活标准。他们提供了有关phrasing content 和headings (h1-h6) 的良好信息。

Answer 2

HTML 源自 SGML，旨在标准化纸质文档的布局。在这个逻辑中，标签H1到H6是为不同级别的标题制作的，所以简单地说标题是一种广告，它必须简短而简短。

因此，原则上，H 标签不应包含分层级别的信息。

另外，SGML 中不存在 div 标签，早期的 HTML 版本中也不存在。 DIV 标签是微软为取代 LAYER 标签而制作的，这是许多旨在消除除 IE 之外的其他浏览器的策略的结果。这个故事是众所周知的，微软也因其中一些事实而受到谴责。