html - HTML5 是否允许在标题(如 h1)中使用 block 级元素(如 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>标签已被重新用作图标的通用 Hook ，并且 (2) 有嵌套 <div>坐在里面 <h2>元素。我质疑第一个的语义，以及第二个的有效性。
现在我想这些代码可以在所有主要浏览器中运行，否则他们不会使用它，但它似乎不太习惯。更重要的是，它甚至有效吗？

注意:我在问题中使用了术语“块级元素”(每个人都理解)，但作为 MDN docs指出:

The distinction of block-level vs. inline elements was used in HTMLspecifications up to 4.01. In HTML5, this binary distinction isreplaced with a more complex set of contentcategories.While the "inline" category roughly corresponds to the category ofphrasingcontent,the "block-level" category doesn't directly correspond to any HTML5content category, but "block-level" and "inline" elements combinedtogether correspond to the flowcontentin HTML5.

Answer 1

这是令人讨厌的代码，完全不符合规范。在 h2 中，您只能有内联元素 措辞内容元素喜欢 span , strong , em等 <i>标签通常用于图标，所以没有什么令人震惊的。但是 div ......？糟糕的令人震惊。将它们切换到 <span>并且代码将是有效的。
这是 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)。