最近文档大纲喋喋不休的综述 PlatoBlockchain 数据智能。垂直搜索。人工智能。

最近的文档大纲 Chatter 综述

HTML标题不是每天的话题 今日, 但我保存的链接文件夹正在收集关于 最近合并 删除 WHATWG 生活标准中的文档大纲算法。

首先,您应该知道该算法从未真正存在过。 当然,它在规范中。 当然,在规范中有关于使用它的警告。 但是没有浏览器实现过它,因为 布鲁斯劳森提醒我们. 我们一直生活在一个平面文档结构中。

这是 非常 旧闻。 Adrian Roselli 一直在撰写有关文档大纲神话的文章 我们不断增强企业的力量. 但这是他 2016 年的帖子,标题为 “没有文档大纲算法” 这全面地说明了它,并定期更新了关于让我们来到这里的对话和斗争的额外背景信息。 这真的是传奇最好的时间线。 阿米莉亚·贝拉米-罗伊兹也 深入研究困境的根源 过去这里是关于 CSS-Tricks 的。

我立即想到了制作支持切片的文档大纲算法的所有工作。 从规范中删除它当然是正确的选择,但即使它现在被埋在某些版本历史中,它也不会消除为此付出的巨大努力。 我还想到了所有好心的人,他们随着时间的推移错误地写了算法(包括在这个网站上!),并期望它指日可待。 由于缺乏行动,我们已经积累了近七年的精神和技术债务。

回顾算法正式不再存在的“新闻”,布鲁斯感叹没有通用 <h> 元素等可以被分割以产生正确的标题级别。 我同意。 拥有一个 <h1> 元素本质上作为暴露存在 <title> 是限制性的,特别是因为页面很少围绕具有单个顶级标题的单个文章构建。 每次我在使用某种卡片组件时,我经常会发现自己畏缩不前 <h3> 可能在技术上是正确的,但感觉不正常。 那是在我们讨论样式考虑之前,较低的标题级别现在需要看起来像一个明显的较高标题级别。

说到标题级别管理,Steve Faulkner(他撰写了从规范中提取算法的 PR)有一个 使用的超级实用概述 <hgroup> element 处理涉及副标题、副标题、替代标题、snd 标语的标题模式。 我敢肯定你已经在野外看到过这样的标记:

<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> is role=generic 此刻,但史蒂夫 指向一个提案 可以将其映射到 role=group. 如果发生这种情况,可访问性树将允许辅助技术为这些段落分配更多的语义含义,作为它们的副标题和标语片段。 听起来很容易,但史蒂夫指出了正在发生的挑战。 他还演示了今天如何使用 ARIA 属性实现这种模式。

只要我们把事情做完,Matthias Ott 就发布了一些关于 创建带有标题的结构化大纲. 查看最后的工具列表,以检查您的标题轮廓。

时间戳记:

更多来自 CSS技巧