时间戳

首页 > 解决方案 > HTML5 是否允许标题（如 h1）内的块级元素（如 div）？

html - 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 文档指出的那样：

在 4.01 之前的 HTML 规范中使用了块级元素与内联元素的区别。在 HTML5 中，这种二元区别被一组更复杂的内容类别所取代。而“inline”类别大致对应于 phrasing content的类别，“block-level”类别并不直接对应任何HTML5内容类别，而是“block-level”和“inline”元素组合在一起对应流HTML5 中的内容 。

标签： htmlsemantic-uifomantic-ui

解决方案

这是令人讨厌的代码，完全不符合规范。在 h2 中，您只能使用内联元素来 表达内容元素，如span, strong,em等。<i>标签通常用于图标，所以没什么令人震惊的。但是divs ...？坏得令人震惊。将它们切换到<span>并且代码将有效。

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

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

推荐阅读