时间戳

首页 > 解决方案 > 2020 年的 HTML 副标题标记

html - 2020 年的 HTML 副标题标记

问题描述

我试图澄清 2020 年应如何在 HTML 中标记子标题。

HTML 生活标准，2020年9 月 1 日规范说要使用<hgroup>：

当标题具有多个级别（例如子标题、替代标题或标语）时，该元素用于对一组 h1–h6 元素进行分组。

同一规范的标题和部分部分解释了 HTML 大纲算法如何生成内容大纲，显示<h2>以下示例中的副标题不会出现在/破坏页面的结构大纲中。

<hgroup id="document-title">
  <h1>HTML</h1>
  <h2>Living Standard — Last Updated 12 August 2016</h2>
</hgroup>

灿烂！除了<hgroup>MDN上的使用说明（在撰写本文时最后修改于 2020 年 4 月 12 日）说：

[鉴于] HTML 大纲算法没有在任何浏览器中实现——那么语义实际上只是理论上的。

但是在语义上标记事物在可访问性方面具有实际应用，那么该怎么办呢？

筛选大部分已经过时的搜索结果，我能找到的最好的指南似乎指向使用 a <p>（例如Usability & Web Accessibility）。但是，w3.org 的Common idioms without dedicated elements页面通常用作此技术的参考，它重定向到 whatwg.org 的版本（遵循2019 年 5 月两个组织之间的谅解备忘录），其中不包括<p>for subheadings idiom，因为，当然，还有<hgroup>元素。

所以我回到了我原来的问题；2020 年我应该如何在 HTML 中标记副标题？

标签： html

解决方案

如果文档的底层结构（大纲）对您很重要，请不要依赖分段元素来创建大纲（尽管您在许多文章中阅读过），当然也不要依赖W3C 弃用hgroup的元素。W3C 非常清楚不该做什么：

h1–h6 元素不得用于标记副标题、副标题、替代标题和标语，除非打算作为新部分或小部分的标题。

该规范在告诉我们应该做什么方面没有多大帮助。WHATWG 只是假装hgroup（和文档大纲算法）被浏览器正确支持，声明：

在这些示例中使用 hgroup 的目的是防止 h2 元素（充当辅助标题）在任何大纲中创建自己的单独部分，而是使 h2 的内容显示在从大纲算法以某种方式表明它不是单独部分的标题，而只是一组标题中的次要标题。

W3C 更加务实，承认：

HTML 没有专门的机制来标记副标题、替代标题或标语。

他们还在这里提出了一些可能的解决方法：没有专用元素的常见习语：副标题、副标题、替代标题和标语。

有了 HTML5 中的所有这些语义元素，您会认为它们可能只是给了我们一个<subhead>标签或其他东西。（他们实际上早在 2013年就玩弄了这个想法。）取而代之的是，a <span>or pwithclass="subhead"为我工作。

如果您不关心轮廓（或可访问性），您可以使用分段元素来创建结构的外观（因为浏览器会尝试使标题看起来正确），并且您可以使用hgroup自己的 CSS 样式.

进一步阅读：没有文档大纲算法。

注意：2022 年 W3C 页面移至https://www.w3.org/TR/2017/WD-html52-20170228/common-idioms-without-dedicated-elements.html

推荐阅读