2020 年 HTML 副标题标记

Min*_*ina 5 html

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

\n

HTML Living Standard,2020 年 9 月 1 日规范规定使用<hgroup>

\n
\n

当标题具有多个级别(例如副标题、替代标题或标语)时,该元素用于对一组 h1\xe2\x80\x93h6 元素进行分组。

\n
\n

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

\n
<hgroup id="document-title">\n  <h1>HTML</h1>\n  <h2>Living Standard \xe2\x80\x94 Last Updated 12 August 2016</h2>\n</hgroup>\n
Run Code Online (Sandbox Code Playgroud)\n

灿烂!除了MDN 上的使用说明<hgroup>(最后修改于 2020 年 4 月 12 日撰写本文时)之外:

\n
\n

[鉴于] HTML 大纲算法未在任何浏览器中实现\xe2\x80\x94,那么语义在实践中仅是理论上的。

\n
\n

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

\n

筛选大部分相当过时的搜索结果,我能找到的最好的指南似乎指向使用<p>(例如可用性和网络可访问性)。但是,w3.org 的“没有专用元素的常见习语”页面通常用作此技术的参考,会重定向到 Whatwg.org 的版本(遵循2019 年 5 月两个组织之间的谅解备忘录),该版本不包括<p>for 副标题习语,因为当然,有<hgroup>元素。

\n

这样我就回到了最初的问题;2020 年我应该如何在 HTML 中标记副标题?

\n

Kal*_*Kal 7

更新:自从我发布这个答案以来,WHATWG 似乎终于面对现实了,删除了对大纲算法切片根等的引用。

\n

在更新的规格中,hgroup它仍然存在,但他们改变了关于如何使用它的建议。他们常

\n
\n

hgroup 元素中标题内容的其他 h1\xe2\x80\x93h6 元素表示子标题或副标题或(辅助)替代标题。

\n
\n

目前的建议是:

\n
\n

该元素可用于将 h1\xe2\x80\x93h6 元素与一个或多个包含表示副标题、替代标题或标语的内容的 p\n元素分组。

\n
\n

所以我原来答案的本质是正确的\xe2\x80\x94你不应该使用所谓的分段元素来重新调整标题标签的用途。是否将p副标题放在 a 中hgroup实际上是个人喜好的问题。:-)

\n
\n

我原来的答案:

\n

如果文档的底层结构(大纲)对您很重要,请不要依赖分段元素来创建大纲(尽管您在许多文章中读到过这些内容),当然也不要依赖该hgroup元素,W3C已弃用。W3C 对于不该做的事情非常明确:

\n
\n

h1\xe2\x80\x93h6 元素不得用于标记副标题、副标题、替代标题和标语,除非打算作为新部分或小节的标题。

\n
\n

该规范对于告诉我们应该做什么没有多大帮助。WHATWG 只是假装hgroup(以及文档大纲算法)得到了浏览器的正确支持,并声明

\n
\n

在这些示例中使用 hgroup 的目的是防止 h2 元素(充当辅助标题)在任何大纲中创建其自己的单独部分,并导致 h2 的内容显示在渲染中大纲算法的输出以某种方式表明它不是单独部分的标题,而只是一组标题中的辅助标题。

\n
\n

W3C 更加务实一点,它承认:

\n
\n

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

\n
\n

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

\n

对于 HTML5 中的所有这些语义元素,您可能会认为它们可能只是给了我们一个<subhead>标签或其他东西。(早在 2013 年,他们就确实尝试过这个想法。)取而代之的是 a<span>pwithclass="subhead"对我来说很有效。

\n

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

\n

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

\n