Пошаговая инструкция: нумерованный список с подзаголовками
Последовательность действий удобно оформить обычным ol. Настоящая нумерация сохраняет порядок и смысл инструкции даже без декоративных кружков и CSS-счётчиков.
Назначение
Последовательность действий удобно оформить обычным ol. Настоящая нумерация сохраняет порядок и смысл инструкции даже без декоративных кружков и CSS-счётчиков.
Как это работает
Каждый li содержит один шаг, короткий заголовок и пояснение. Отступы задаются списку и его пунктам. Если рядом есть общий заголовок раздела, уровень заголовков шагов должен вписываться в иерархию всей страницы.
Пример
<style>.steps{padding-inline-start:2rem}.steps li{padding-inline-start:.4rem;margin-block:1rem}.steps h3{margin:0 0 .3rem}.steps p{margin:0}</style>
<section><h2>Подготовка примера</h2><ol class="steps">
<li><h3>Создайте папку</h3><p>Храните учебные файлы отдельно от рабочего проекта.</p></li>
<li><h3>Добавьте index.html</h3><p>Сохраните документ в кодировке UTF-8.</p></li>
<li><h3>Откройте страницу</h3><p>Проверьте заголовок и текст.</p></li>
</ol></section>Что должно получиться
Получается три явно пронумерованных шага. Порядок задаётся самим HTML, а не расположением элементов в сетке. Пояснение под заголовком не создаёт отдельный лишний пункт.
Граница применения и частая ошибка
Нельзя переставлять шаги визуально через order, оставляя другой порядок в документе. Не вставляйте номера одновременно в текст заголовка и стандартный маркер списка: это приводит к двойной нумерации.
Самостоятельная проверка
Отключите стили и прочитайте инструкцию заново. Вставьте дополнительный шаг между первым и вторым: номера должны обновиться без ручного редактирования. Проверьте перенос длинного названия шага.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.