HTML5 是否允许在标题（如 h1）内使用 block-level 元素（如 div）？

Question

我总是会说不，但后来我从 Semantic UI (and Fomantic UI) 中看到这段代码，一个非常流行的 front-end 框架：

<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> 元素里面。我质疑第一个的语义，以及第二个的有效性。

现在我想该代码在所有主要浏览器中都可以工作，否则他们不会使用它，但它看起来并不符合习惯。更重要的是，它是否有效？

注意：我在问题中使用了术语'block-level element'（每个人都理解），但正如MDN docs指出的那样：

The distinction of block-level vs. inline elements was used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. While the "inline" category roughly corresponds to the category of phrasing content, the "block-level" category doesn't directly correspond to any HTML5 content category, but "block-level" and "inline" elements combined together correspond to the flow content in 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 生活标准。他们提供了关于 phrasing content and headings (h1-h6) 的有用信息。

Answer 2

HTML 源自 SGML，旨在标准化纸质文档的布局。按照这个逻辑，H1到H6标签是为不同级别的标题做的，所以简单的说一个标题就是一种广告，一定要简短。

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

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

Answer 3

根据 HTML5 规范，它是无效的...但是很多 UI 库不遵循这种严格的语义方式，甚至 Google 正在使用 <center> 在其主页中使用 HTML5 Doctype 标记。所以这不是“必须”，也许只是“应该”......遵循规范是一个很好的做法，但开发人员不应该为此付出太多努力。

此外，检查 html 标记的有效性是一种 google 做法，检查下面的 link... https://validator.w3.org/nu/#textarea

HTML5 是否允许在标题（如 h1）内使用 block-level 元素（如 div）？

Does HTML5 allow a block-level element (like div) inside a heading (like h1)?

html

semantic-ui

fomantic-ui