Оглавление статьи и устойчивые якоря
Оглавление длинной статьи помогает переходить к конкретным ответам и делиться ссылками на отдельные разделы.
Назначение
Оглавление длинной статьи помогает переходить к конкретным ответам и делиться ссылками на отдельные разделы.
Как это работает
Каждая ссылка содержит фрагмент URL, совпадающий с уникальным id заголовка. Устойчивые короткие идентификаторы лучше случайно меняющихся номеров, если на раздел уже могут ссылаться извне.
Пример
<nav aria-label="В этой статье"><ul><li><a href="#setup">Подготовка</a></li><li><a href="#check">Проверка</a></li></ul></nav><h2 id="setup">Подготовка проекта</h2><p>Первый шаг.</p><h2 id="check">Проверка результата</h2><p>Второй шаг.</p>Что должно получиться
Обе ссылки ведут к соответствующим заголовкам. Изменение видимого текста не требует изменения якоря, если тема раздела осталась прежней.
Граница применения и частая ошибка
Не меняйте опубликованные якоря без необходимости при небольшой правке заголовка. Старые ссылки продолжат открывать страницу, но перестанут приводить читателя к нужному месту.
Самостоятельная проверка
Добавьте третий раздел и ссылку на него. Затем измените видимое название, сохранив id, и убедитесь, что прежний адрес с фрагментом продолжает работать.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.