Как сделать оглавление статьи в HTML: якорные ссылки, CSS и автоматизация

Оглавление особенно полезно в длинной инструкции, обзоре или справочной статье: читатель сразу видит структуру материала и может перейти к нужному разделу. Для такого содержания не требуется сложный JavaScript — базовый вариант строится на обычных HTML-ссылках, которые ведут к уникальным id заголовков.

Старая версия этой инструкции опиралась на ручные якоря редактора и оформление, характерное для Joomla прошлых поколений. Сейчас лучше использовать стандартные фрагментные ссылки, семантический контейнер <nav> и CSS, а автоматизацию подключать только там, где она действительно экономит время.

Как работает оглавление с якорными ссылками

В адресе страницы часть после символа # называется фрагментом. Если на странице есть элемент с соответствующим id, браузер прокручивает документ к нему. Поэтому оглавление состоит из двух связанных частей: ссылки вида href="#razdel" и заголовка с id="razdel".

Наглядный пример. Ниже — небольшое рабочее оглавление. Ссылки ведут к трём демонстрационным фрагментам прямо внутри этого блока, поэтому результат можно проверить сразу на странице.

В реальной статье вместо демонстрационных абзацев ссылки оглавления ведут к H2/H3 с такими же уникальными id. Код для копирования приведён ниже.

<a href="#ustanovka">Установка</a> <h2 id="ustanovka">Установка</h2>

Значение id должно быть уникальным в пределах документа. Для удобства лучше использовать короткие латинские идентификаторы без пробелов, которые понятны человеку: ustanovka, nastrojka, oshibki. Менять их после индексации статьи без причины нежелательно, потому что на конкретные фрагменты могут ссылаться другие страницы.

Готовая разметка содержания статьи

Если содержание является отдельным навигационным блоком, его можно обернуть в <nav> и дать понятную подпись через aria-label. Внутри удобно использовать обычный список ссылок.

<nav class="article-toc" aria-label="Содержание статьи"> <p><strong>Содержание</strong></p> <ol> <li><a href="#chto-eto">Что это такое</a></li> <li><a href="#primer">Пример</a></li> <li><a href="#oshibki">Типичные ошибки</a></li> </ol> </nav>

После блока в самой статье должны находиться соответствующие заголовки: <h2 id="chto-eto">, <h2 id="primer"> и <h2 id="oshibki">. Не стоит создавать пустые элементы только ради якорей, если идентификатор можно поставить непосредственно на заголовок.

Как оформить оглавление с помощью CSS

Содержание должно быть заметным, но не конкурировать с основным текстом. Для базового оформления достаточно отступов, спокойной рамки и нормального состояния ссылок при наведении и клавиатурном фокусе.

.article-toc { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid #d8d8d8; border-radius: .5rem; } .article-toc ol { margin-bottom: 0; } .article-toc a:hover, .article-toc a:focus-visible { text-decoration-thickness: 2px; }

Если на сайте есть фиксированная верхняя панель, после перехода к якорю заголовок может оказаться под ней. Вместо JavaScript обычно достаточно задать заголовкам scroll-margin-top:

article h2[id], article h3[id] { scroll-margin-top: 6rem; }

Значение подбирают под реальную высоту фиксированной шапки. Такой приём не меняет положение элемента в обычном потоке документа, а влияет именно на точку остановки при прокрутке к фрагменту.

Вложенное оглавление для H2 и H3.

В больших руководствах содержание может отражать не только разделы H2, но и подразделы H3. В таком случае вложенность списка должна повторять структуру документа, а не использоваться просто для визуального отступа.

<ol> <li> <a href="#html">HTML</a> <ol> <li><a href="#html-tags">Теги</a></li> <li><a href="#html-links">Ссылки</a></li> </ol> </li> <li><a href="#css">CSS</a></li> </ol>

Не нужно включать в оглавление каждый небольшой подзаголовок. Если список становится длиннее самой видимой части статьи и перестаёт помогать ориентироваться, оставьте только ключевые разделы.

Ручное и автоматическое оглавление в Joomla

Для одной-двух статей ручная разметка остаётся самым прозрачным вариантом: вы полностью контролируете текст ссылок и id. В большом справочнике удобнее автоматизация, которая собирает заголовки после рендеринга материала.

При выборе автоматического решения важно проверить несколько вещей:

• оно использует существующие H2/H3, а не создаёт визуальные заголовки из обычных абзацев;
• генерируемые id стабильны и не меняются при каждом открытии страницы;
• одинаковые заголовки получают разные идентификаторы;
• оглавление не дублируется в мобильной и десктопной версии;
• переход по ссылкам работает с клавиатуры и после включения кеширования.

Если расширение генерирует случайные якоря или перестраивает заголовки, такие ссылки трудно использовать извне. Для evergreen-материалов стабильность фрагментов важнее красивой анимации.

Частые ошибки при создании содержания

Оглавление само по себе не исправляет плохую структуру текста. Если статья состоит из десятков заголовков с одним предложением под каждым, содержание лишь подчёркивает дробность. Сначала стоит выстроить логическую иерархию материала, а затем добавлять навигацию.

На практике чаще всего встречаются такие ошибки:

• одинаковые id у нескольких заголовков;
• ссылка ведёт на несуществующий идентификатор;
• в href забывают символ #;
• уровни H2/H3 выбирают ради размера шрифта, а не структуры;
• оглавление содержит слишком много второстепенных пунктов;
• фиксированная шапка перекрывает заголовок после перехода.

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

Итог

Современное оглавление статьи можно сделать без сложных скриптов: уникальные id на заголовках, ссылки на фрагменты, семантический <nav> и немного CSS дают понятную и устойчивую навигацию. Автоматизация оправдана для большого количества длинных материалов, но она должна сохранять стабильные якоря и нормальную структуру заголовков.

Если нужно освежить базовые знания разметки, см. материалы «Что такое HTML» и «HTML-теги: что это и какие бывают».