Обзор недавней болтовни о структуре документа

Исходный узел: 1586057

Не каждый день заголовки HTML являются темой дежурный, но в моей папке сохраненных ссылок накапливаются статьи о недавно слился удаление алгоритма структуры документа в WHATWG Living Standard.

Во-первых, вы должны знать, что алгоритма никогда не существовало. Конечно, это было в спецификации. И, конечно же, в спецификации было предупреждение об его использовании. Но ни один браузер никогда не реализовывал это, так как Брюс Лоусон напомнил нам. Мы все время жили в плоской структуре документа.

Это очень старые новости. Адриан Роселли писал о мифе о набросках документов. 2013 года. Но это его пост 2016 года под названием «Алгоритма структуры документа не существует» это всесторонне излагает это и регулярно обновляется дополнительными кусочками контекста о разговорах и борьбе, которые привели нас сюда. Это действительно лучшая хронология саги. Амелия Беллами-Ройдс также копался в корнях дилеммы в прошлом здесь, на CSS-Tricks.

Я мгновенно вспоминаю всю работу, проделанную для создания алгоритма структуры документа, поддерживающего секционирование. Удаление его из спецификации — это, безусловно, правильное решение, но оно не умаляет геркулесовых усилий, которые были вложены в него, даже если теперь оно похоронено в какой-то истории версий. Я также думаю обо всех благонамеренных людях, которые ошибочно писали об алгоритме с течением времени (в том числе и на этом самом сайте!), ожидая, что он не за горами. Мы накопили почти семь лет умственного и технического долга из-за бездействия.

Просматривая «новости» о том, что алгоритма официально больше нет, Брюс сетует на то, что универсального алгоритма нет. <h> элемент или тому подобное, который можно разделить на части для получения правильного уровня заголовка. Я согласен. Наличие <h1> элемент по существу существует как открытый <title> ограничивает, особенно потому, что страницы так редко структурированы вокруг одной статьи с одним заголовком верхнего уровня. Я часто ловлю себя на том, что морщусь каждый раз, когда делаю какой-то карточный компонент, где использую <h3> может быть технически правильным, но чувствует себя не в порядке. И это еще до того, как мы поговорим о соображениях стиля, где более низкий уровень заголовка теперь должен выглядеть как отдельный более высокий уровень заголовка.

Говоря об управлении на уровне заголовков, Стив Фолкнер (автор пиара, вытащившего алгоритм из спецификации) супер практичный обзор использования <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> is role=generic на данный момент, но Стив указывает на предложение который мог бы сопоставить его с role=group. Если это произойдет, дерево доступности позволит вспомогательным технологиям присвоить большее семантическое значение этим абзацам в качестве частей подзаголовка и слогана, чем они и являются. Звучит просто, но Стив отмечает проблемы, которые мешают. Он также демонстрирует, как такой шаблон может быть реализован сегодня с помощью атрибутов ARIA.

Пока мы подводим итоги, Маттиас Отт опубликовал несколько советов по создание структурированного плана с заголовками. В конце вы найдете отличный список инструментов для проверки контуров заголовков.

Отметка времени:

Больше от CSS хитрости