Практика: карточка с двухуровневым планом темы
Вложенный список помогает показать, какие подпункты относятся к конкретному этапу. Важно вложить дочерний список внутрь соответствующего li, а не разместить его случайным соседом общего списка.
Назначение
Вложенный список помогает показать, какие подпункты относятся к конкретному этапу. Важно вложить дочерний список внутрь соответствующего li, а не разместить его случайным соседом общего списка.
Как это работает
Внешний ol задаёт порядок этапов, внутренний ul перечисляет состав одного этапа. Отступы меняются CSS, но сама иерархия остаётся в разметке. Карточка не требует интерактивного дерева с дополнительной клавиатурной моделью.
Пример
<style>.outline-card{max-width:32rem;padding:1rem;border:1px solid #9ebdaa}.outline-card li{margin-block:.5rem}.outline-card ul{padding-inline-start:1.3rem}</style>
<section class="outline-card"><h2>План работы над страницей</h2><ol><li>Подготовить структуру<ul><li>Назвать разделы</li><li>Выбрать заголовки</li></ul></li><li>Добавить оформление</li><li>Проверить результат</li></ol></section>Что должно получиться
Подпункты «Назвать разделы» и «Выбрать заголовки» относятся к первому этапу. Второй и третий этапы остаются на внешнем уровне и не получают случайное вложение.
Граница применения и частая ошибка
Не создавайте уровни только ради визуального сдвига вправо. Если порядок подпунктов тоже важен, выберите ol вместо ul. Слишком глубокая иерархия усложняет чтение; лучше разделить крупную тему на самостоятельные части.
Самостоятельная проверка
Добавьте подпункты ко второму этапу, сохранив правильное закрытие li. Проверьте структуру в DOM и скопируйте текст в простой редактор. Убедитесь, что основные этапы можно понять отдельно от деталей.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.