最近关于文档大纲的讨论综述

HTML 标题并非每天都是热门话题，但我保存的链接文件夹中积累了关于 最近合并的 WHATWG 活跃标准中删除文档大纲算法的文章。

首先，您应该知道该算法实际上从未存在过。当然，它在规范中。而且当然，规范中也有一条关于使用它的警告。但正如 布鲁斯·劳森提醒我们，没有任何浏览器实现过它。我们一直生活在扁平的文档结构中。

这是一个非常古老的消息。Adrian Roselli 一直在撰写关于文档大纲神话的文章，早在 2013 年。但是他 2016 年发表的一篇题为 “不存在文档大纲算法” 的文章，全面解释了这一点，并且定期更新，加入关于我们走到这一步的对话和斗争的额外背景信息。这确实是这段故事的最佳时间线。Amelia Bellamy-Royds 也曾 深入探究了这种困境的根源，过去也曾在 CSS-Tricks 上发表过。

我的脑海中立即浮现出所有用于创建支持分区的文档大纲算法的工作。从规范中删除它无疑是正确的选择，但这并不意味着那些付出了巨大努力的人们的工作白费了，即使现在它被埋藏在一些版本历史中。我也在想，所有那些过去在错误地撰写关于该算法的文章的人们（包括在这个网站上！）都以为它马上就要来了。我们积累了近七年的心理和技术债务，这似乎源于缺乏行动。

撇开该算法正式不再存在的“新闻”不谈，布鲁斯哀叹的是，没有通用的 <h> 元素或类似元素可以进行分区以生成正确的标题级别。我同意。<h1> 元素实际上就像一个公开的 <title> 一样具有约束性，特别是考虑到页面很少围绕单个文章和单个顶级标题进行结构化。我经常发现自己在制作某种卡片组件时会感到不自在，在这种情况下，使用 <h3> 可能是技术上正确的，但感觉顺序不对。甚至在我们讨论样式考虑因素之前，更低的标题级别现在需要看起来像一个不同的更高标题级别。

说到标题级别管理，史蒂夫·福克纳（他编写了从规范中移除该算法的 PR）有一个 关于使用 <hgroup> 元素的超级实用的概述，用于处理涉及副标题、字幕、替代标题和标语的标题模式。我敢肯定您在野外见过类似的标记

<h1>Disappointingly Average</h1>
<h2>The Autobiography of Geoff Graham</h2>
<h3>by Geoff Graham</h3>

这与由标题级别驱动的扁平文档大纲不符。每个标题都代表一个部分，形成一个信息层次结构

Disappointingly Average
└── The Autobiography of Geoff Graham
    └── by Geoff Graham

相反，我们想要的是一组标题。<hgroup> 元素登场

当嵌套在 <hgroup> 元素中时， <p> 元素的内容表示副标题、替代标题或标语，这些内容不包括在文档大纲中。

因此，我们获得了这种结构

<hgroup>
  <h1>Disappointingly Average</h1>
  <p>The Autobiography of Geoff Graham</p>
  <p>by Geoff Graham</p>
</hgroup>

<hgroup> 现在是 role=generic，但史蒂夫 指出了一个提案，可以将其映射到 role=group。如果发生这种情况，辅助技术将能够在辅助技术树中为这些段落分配更多语义含义，因为它们是副标题和标语部分。听起来很简单，但史蒂夫指出了阻碍这一目标的挑战。他还演示了如何使用 ARIA 属性在今天实现这种模式。

既然我们正在总结，马蒂亚斯·奥特发布了一些关于 使用标题创建结构化大纲 的技巧。请查看结尾部分，那里有一个很棒的工具列表，用于检查您的标题大纲。