Корни секционирования

Понятие появилось вместе с HTML5 и так называемым алгоритмом структуры документа (outline algorithm). Идея была красивой: браузер сам строит оглавление страницы по заголовкам и секциям, а разработчик может вкладывать блоки с собственными заголовками, не заботясь об уровнях. Корни секционирования в этой схеме — «изолированные острова». Их заголовки образуют отдельное дерево и не попадают в оглавление внешнего документа.

Логика понятна на примере цитаты. Если в blockquote приводится фрагмент чужой статьи вместе с её подзаголовком, этот подзаголовок не должен выглядеть разделом вашей страницы. То же для ячейки таблицы, иллюстрации с подписью или раскрывающегося блока details.

Чем отличаются от секционирующих элементов

Есть родственная группа — секционирующие элементы: article, section, nav, aside. Они, наоборот, создают разделы внутри общей структуры и по замыслу должны были в неё встраиваться. Корни секционирования не создают раздел, а отгораживают своё содержимое. Тег body — корень для всего документа.

Что изменилось на практике

Ни один популярный браузер и ни одна программа экранного доступа так и не реализовали алгоритм структуры. В 2022 году его заменили в стандарте HTML простым алгоритмом по уровням заголовков, а вместе с ним потеряло практический смысл и разделение на корни. Экранные дикторы строят список заголовков по уровням h1–h6 и не учитывают, внутри чего заголовок стоит.

Отсюда рабочие правила, которые актуальны сейчас:

• Уровни заголовков выбирают по смыслу всей страницы и не перескакивают через ступени без причины.
• Заголовок внутри цитаты, если он не нужен в навигации, лучше оформить абзацем со strong или классом.
• Для подписи к таблице используют caption, к картинке — figcaption, к группе полей — legend, а не отдельный заголовок.

Как разметить цитату и иллюстрацию

<h2>Отзывы клиентов</h2>
<blockquote>
  <p><strong>Доставка за два дня</strong></p>
  <p>Заказ из Компании-пример пришёл раньше срока.</p>
</blockquote>
<figure>
  <img src="scheme.webp" alt="Схема проезда">
  <figcaption>Вход со двора</figcaption>
</figure>

Заголовок отзыва выделен жирным абзацем, поэтому не появится в списке заголовков страницы рядом с её разделами. Подпись к схеме привязана к иллюстрации и тоже не конкурирует с h2. Подробнее об оформлении цитат — в статье «Цитатный блок», а о том, как заголовки читают поисковые системы, — в материале про теги заголовков. Общие принципы осмысленной вёрстки собраны в статье о семантической разметке.