Вложенное оглавление: списки без потери иерархии
Вложенный список помогает показать разделы и подразделы, сохраняя их связи в HTML.
Назначение
Вложенный список помогает показать разделы и подразделы, сохраняя их связи в HTML.
Как это работает
Дочерний ul или ol помещается внутрь соответствующего li. Если вложить список рядом с li как отдельный соседний элемент, структура станет неправильной или перестанет выражать нужную связь.
Пример
<nav aria-label="Оглавление примера"><ol><li><a href="#structure">Структура</a></li><li><a href="#styles">Стили</a><ol><li><a href="#colors">Цвета</a></li></ol></li></ol></nav><h2 id="structure">Структура</h2><h2 id="styles">Стили</h2><h3 id="colors">Цвета</h3>Что должно получиться
Пункт «Цвета» вложен в «Стили», а уровни заголовков отражают ту же связь. Ссылки ведут к существующим идентификаторам в пределах примера.
Граница применения и частая ошибка
Не используйте произвольные отступы пробелами вместо настоящей вложенности. Также избегайте слишком глубоких уровней меню, которые трудно просмотреть на маленьком экране.
Самостоятельная проверка
Добавьте второй подраздел в группу CSS. Затем отключите стили и убедитесь, что принадлежность пунктов видна из структуры списка, а все якоря существуют.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.