Оглавление веб-статьи: якорные ссылки, порядок и доступность

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

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

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

Содержание веб-статьи — это навигация внутри одного документа, а не меню сайта и не перечень похожих публикаций. WAI G64 описывает его как ссылки на важные части документа и предлагает сверять формулировки и порядок пунктов с реальными разделами. Это хороший редакторский тест: каждый пункт должен вести в тот фрагмент, который обещает.

До HTML выпишите заголовок статьи и её H2. Для каждой секции сформулируйте короткий ответ на вопрос «что здесь найдёт читатель?». Если ответ не получается без общих слов вроде «дополнительно», возможно, раздел слишком расплывчатый, или ему нужен ясный заголовок. Содержание не должно маскировать слабую структуру: сначала перестройте материал, затем переносите его карту в ссылки.

Начните с главных разделов. Добавляйте подчинённые H3 только тогда, когда они помогают выбирать между отдельными подтемами, а не ради визуально подробного списка. На маленьком экране длинное оглавление может занять больше первого экрана, чем сам полезный ответ. Уберите из него вводные блоки, примечания и FAQ, если они не помогают читателю сориентироваться; при этом сами разделы останутся на странице.

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

Хороший пункт оглавления узнаваем при беглом сканировании и совпадает с заголовком в месте назначения. Если заголовок длинный, лучше отредактировать его один раз, чем создавать для содержания второе, похожее, но неточное название. Формулировки «Введение», «Выводы» и «Разное» редко помогают выбрать раздел; уточните, какую задачу решает секция, например «Как проверить ссылки перед публикацией».

Не обещайте в пункте больше, чем даёт раздел. Формулировка «Выбор шрифта для сайта» не должна вести к абзацу, который лишь кратко упоминает пару гарнитур. Такое несоответствие особенно заметно в длинном тексте: читатель переместился по ссылке, но не нашёл обещанного ответа. После редактуры проверьте каждую пару «название пункта — заголовок цели» отдельно.

Если оглавление вложенное, отразите только реальную иерархию H2 и H3. Не делайте визуальную вложенность отступами, если в статье подзаголовок не является частью предыдущего раздела. Ранжирование заголовков передаёт структуру и вспомогательным технологиям; W3C советует вкладывать уровни по смыслу и не перескакивать через уровень без причины. WAI: структура заголовков

Каждый пункт содержания — обычная ссылка на фрагмент того же документа. Её атрибут href должен указывать на id нужного заголовка: например, ссылка «Проверка якорей» ведёт к #proverka-yakorey, а сам H2 имеет id="proverka-yakorey". Ссылка и цель должны совпадать посимвольно; проверьте это после копирования страницы в CMS, где редактор может автоматически менять разметку.

Выбирайте идентификаторы, которые легко прочитать и сохранить при следующей редактуре. Короткая транслитерация темы обычно яснее, чем случайный номер или полный заголовок с пунктуацией. Не привязывайте id к позиции раздела: вставка новой секции в начале не должна превращать старую ссылку в ошибку. Идентификатор должен быть уникальным на странице; одинаковый id у двух заголовков делает назначение ссылки неопределённым.

Стабильные якоря полезны не только для оглавления. Читатель может скопировать ссылку на раздел, отправить её коллеге или сохранить в закладках. Поэтому не меняйте id при небольшой правке формулировки заголовка. Если раздел действительно удалён или переехал на другую страницу, обновите ссылки и перенаправления, которые ведут к старому адресу, когда система сайта это позволяет.

Оглавление можно поместить в nav с короткой видимой подписью и списком ссылок. Используйте заголовок и aria-labelledby, чтобы навигационную область можно было отличить от главного меню сайта и ссылок в подвале. Если подходящий элемент интерфейса не нужен, не добавляйте кнопки и скрипты: обычные ссылки сохраняют ожидаемое поведение браузера, включая открытие адреса раздела и копирование ссылки.

Пример простого шаблона: <nav aria-labelledby="toc-title"><h2 id="toc-title">Содержание статьи</h2><ol><li><a href="#karta-razdelov">Карта разделов</a></li><li><a href="#yakory">Устойчивые якоря</a></li></ol></nav>. В тексте страницы заголовок цели получает тот же id: <h2 id="karta-razdelov">Сначала соберите карту разделов</h2>. В реальной статье добавьте все выбранные пункты и проверьте каждый переход.

Список ul уместен, когда важен набор разделов без подразумеваемой очередности. Для последовательного руководства можно выбрать ol, если нумерация помогает понять маршрут. Не используйте список определений или таблицу ради оформления ссылок: семантика должна описывать отношение между пунктами, а не желаемый внешний вид. Группируйте H3 под соответствующим H2 только если это облегчает выбор, иначе оглавление станет чрезмерно глубоким.

Содержание должно оставаться полезным без CSS и JavaScript. При отключённых стилях у него видны подпись, список и понятный порядок; при клавиатурной навигации ссылки получают фокус и активируются стандартным способом. Не заменяйте ссылки на кликабельные div, иконки без названий или элементы, которые реагируют только на мышь. WAI рекомендует идентифицировать навигацию и давать ей короткое различимое название. WAI: маркировка навигации

После перехода по якорю браузер прокручивает документ к цели. Закреплённая верхняя панель может закрыть первую строку раздела, из-за чего кажется, что ссылка ведёт не туда. Добавьте отступ прокрутки к самим заголовкам, например article h2, article h3 { scroll-margin-top: 5rem; }. Значение подберите по фактической высоте шапки и проверьте на узком экране; слишком большой отступ оставит ненужную пустоту.

Для страницы с меняющейся высотой шапки CSS-переменная делает настройку понятной: :root { --header-height: 4.5rem; } article :is(h2, h3) { scroll-margin-top: calc(var(--header-height) + 1rem); }. Не копируйте число вслепую: высота панели меняется при переносе навигации, увеличении текста и адаптации на мобильном. Сверьте положение цели в реальном шаблоне и оставьте достаточно свободного места сверху.

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

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

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

Просмотрите структуру заголовков отдельно от визуального дизайна: один H1 для названия статьи, далее последовательные H2 и вложенные по смыслу H3. Проверьте уникальность id, отсутствие пустых ссылок и соответствие порядка. WAI G64 предлагает именно такие сопоставления: пункты и порядок содержания должны соответствовать названиям и последовательности разделов.

Включайте столько крупных разделов, сколько нужно, чтобы читатель понял содержание и нашёл задачу. Обычно разумно начать с H2 и добавить только те H3, между которыми действительно выбирают. Число пунктов зависит от структуры статьи: если список стал тяжело сканировать, сократите уровень детализации или пересмотрите деление материала.

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

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

Задайте заголовкам секций CSS-свойство scroll-margin-top и настройте значение по фактической высоте шапки. Проверьте переход после загрузки страницы, при раскрытии мобильного меню и при увеличении масштаба. Один и тот же отступ может не подходить для разных вариантов закреплённой панели.

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

Нет. Обычная ссылка на id заголовка работает без JavaScript и сохраняет фрагмент в URL. Скрипт нужен только для дополнительного поведения, например автоматического обновления текущего пункта при прокрутке; сначала убедитесь, что базовые ссылки и цели корректны сами по себе.

Проверьте, поддерживает ли редактор поле якоря для заголовков или отдельные блоки HTML с сохранением атрибута. Если id удаляется при публикации, не маскируйте проблему ссылками на случайные элементы: измените шаблон или правила санитизации, затем повторно проверьте публичную страницу и прямые URL.

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