HTML5 是否允许在标题如 h1中使用块级元素如 div？

如何解决HTML5 是否允许在标题如 h1中使用块级元素如 div？

我总是会拒绝，但后来我从非常流行的前端框架 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) 嵌套的 <div> 就在里面<h2> 元素。我质疑第一个的语义，以及第二个的有效性。

现在我想代码在所有主要浏览器中都可以使用，否则他们不会使用它，但它似乎不太习惯。更重要的是，它甚至有效吗？

---

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

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

解决方法

这是令人讨厌的代码，完全不符合规范。在 h2 中，您只能有 内联元素 措辞内容元素，例如 span、strong、em 等。{不过，{1}} 标签通常用于图标，所以没什么可震惊的。但是 div ......？糟糕的令人震惊。将它们切换到 <i>，代码将有效。

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

编辑：MDN 不是官方规范，正如评论中的原始海报所指出的那样。然而，它基于官方规范。 HTML 的权威来源应该是来自 Web 超文本应用技术工作组 (WHATWG) 的 HTML Living Standard。它们提供了关于 phrasing content 和 headings (h1-h6) 的很好的信息。

,

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

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

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