Структура документа. Заголовки. Outline.
Алгоритм Outline. Заголовки в структуре документа.
Исторический очерк
Заголовки в html нужны для разметки названий последовательных разделов в документе. При этом их последовательность не должна нарушаться. Как оглавление в книге, например:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1>Книга о чем-то</h1>
<h2>Глава 1</h2>
<h3>Пункт 1</h3>
<h4>Подпункт 1</h4>
<h4>Подпункт 2</h4>
<h4>Подпункт 3</h4>
<h3>Пункт 2</h3>
<h4>Подпункт 1</h4>
<h5>Еще подпункт подпункта 1</h5>
<h6>Уточняющий пункт</h6>
<h5>Еще подпункт подпункта 2</h5>
<h4>Подпункт 2</h4>
<h4>Подпункт 3</h4>
<h2>Глава 2</h2>
Все вроде логично, но на заре зарождения первых спецификаций html, не было способа выразить такую логическую структуру. Браузер не понимал, что h2 на самом деле вложен в h1, и определяет таким образом структуру. Проблема была в следующем:
1
2
3
4
5
6
7
8
9
10
<div>
<h1>Заголовок 1</h1>
Контент 1
<h2>Заголовок 2</h2>
Контент 2
<h3>Заголовок 3</h3>
Контент 3
</div>
<div>Контакты</div>
Как отделить контакты от заголовков. Потому-что Контент 3 и Контакты - это просто соседние узлы. Заголовочные элементы разного уровня были чисто логической структурой, а не DOM структурой, в них входит все до следующего заголовка.
Это можно было выразить как выполнить команду h1 значит внедрить заголовок в контекст документа, тег p значит начать писать текст с красной строки.
Тогда html еще не был древовидной структурой документа, он был плоским.
Тогда же с моделью заголовков была еще проблема, ведь уровень заголовка определялся названием тега (от 1 до 6), а не контекстом где он используется.
В ранних предложениях html5 был предложен заголовок h, как “заголовок без уровня”, для секционных элементов.
1
2
3
4
5
6
7
8
9
<article>
<h></h>
<article>
<h></h>
</article>
</article>
<section>
<h></h>
</section>
Алгоритм автоматически пересчитывал уровень заголовков и браузер определял бы уровень каждого из них исходя из вложенности <article>, <section>.
Еще рассмотрим пример:
1
2
3
4
<div>
<h2>Заголовок</h2>
<p>Контент</p>
</div>
И пример
1
2
3
4
<section>
<h>Заголовок</h>
<p>Контент</p>
</section>
Видно проблему, что заголовок h2 подразумевает наличие выше h1, а заголовок h находясь в секции section сам формирует нужный уровень и обозначает подраздел в родительском элементе.
На верхнем уровне страницы будет заголовок 1 уровня, далее остальные без пропуска. Также для группировки контента внедрили элемент <hgroup>, который представляет заголовок и связанное с ним содержимое.
Но для читалок с экрана это представляло проблему, так как все заголовки h это просто плоское дерево, и нужно было что-то делать с этим.
Для совместимости с html4 сохранили уровни заголовков. Но алгоритм расчета был очень сложным, стали думать над алгоритмом формирования неявных секций.
1
2
3
4
5
6
<article>
<h1></h1>
<article>
<h2></h2>
</article>
</article>
Нужно исправить те элементы которые у нас есть, а не придумывать новые.
Outline
Структуру страницы можно определить в виде дерева, где уровень вложенности заголовков определяет их важность.
Outline- это все заголовки всех уровней в виде дерева вложенности (как оглавление)
Контент на странице может быть вложенный, а может быть независимый, и у каждой части подразумевается своя важность.
Так же можем ли мы на одной странице говорить про несколько сущностей, или только про одну.
С 2022 года изменился алгоритм Outline
Каждая секция теперь должна содержать только один заголовок. Чем глубже вложенность тогда нужно увеличивать номер тега h*.
Элементы section и article различаются только значением их содержимого и ничего более.
Рассмотрим пример:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Главная страница</h1>
<section>
<h2>Новости</h2>
<article>
<h3>Событие 1</h3>
<article>
<h4>Событие 1.1</h4>
</article>
</article>
<article>
<h3>Событие 2</h3>
</article>
</section>
<aside>
<h2>Реклама</h2>
</aside>
</body>
</html>
Примерно такой структура должна быть сейчас.
Как показывает Outline документа валидартор https://validator.w3.org/ ,то есть структура корректна.
Что мы получаем
Алгоритм Outline позволяет создавать семантически правильную структуру документа, основанную на секционных элементах и заголовках.
Это улучшает доступность screen readers и SEO.
Главное правило - каждая секция должна иметь заголовок, а вложенность определяет иерархию разделов.
Так же если мы пользуемся секционными элементами, мы руководствуемся какой-то логикой определения заголовков.
Что тут нужно учитывать:
- Заголовки в документе должны идти от общего к частному
- Основной заголовок на странице
h1. - Уровни заголовков не нужно пропускать.
- Нужно секционные элементы для группировки контента с подзаголовками.
- Не меняйте семантику ради стиля.
- Заголовки без содержимого не должны использоваться.
- Нужно учитывать пользователей, которые взаимодействуют с вашим интерфейсом с помощью вспомогательных технологий.
Ссылки
Хотите оптимизировать свой бизнес, нужен сервис, сайт или интеграция.
Бесплатно расчитаю время разработки, предложу решение вашей задачи.