Нумерация шагов в веб-инструкции: как продолжить список после вставки блока

Когда длинная инструкция прерывается иллюстрацией, пояснением или кодом, нумерация может начаться заново и запутать читателя. Для продолжения последовательности используйте семантический список <ol> с атрибутом start, а для разового исправления номера — value у конкретного <li>. Ниже разберём, где закончить первый фрагмент, как разметить вставку и проверить, что следующий шаг действительно продолжает процесс.

В руководстве номер — часть смысла. На шаг 6 читатель может сослаться в комментарии, вернуться к нему после проверки или сопоставить его с отдельной иллюстрацией. Если после блока-примера начинается новый список с единицы, видимая последовательность уже не совпадает с реальным порядком действий. Особенно легко потерять место, когда инструкцию читают по диагонали или открывают по ссылке на конкретный пункт.

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

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

Проверьте три признака одной последовательности:

Если все три признака есть, сохраняйте счёт. Если после вставки начинается отдельная задача с собственным результатом, например «проверьте готовый файл», дайте ей самостоятельный подзаголовок и новый список. Не маскируйте смену процедуры числом 7: сначала объясните переход словами.

Наиболее прямой способ после самостоятельного блока — закрыть первый <ol>, разместить иллюстрацию или пояснение вне списка и начать следующий <ol> с атрибутом start. Значение указывает номер, с которого продолжится новый список. Поэтому после пунктов 1–3 следующий фрагмент начнётся с 4:

start принимает числовое значение даже тогда, когда вид нумерации оформлен буквами или римскими цифрами. Это описано в справке MDN для элемента <ol>. Содержимое каждого шага при этом остаётся обычным элементом <li>, а не абзацем, которому вручную приписали цифру.

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

Если сбился только один номер или продолжение начинается с точки, заданной структурой материала, можно установить value непосредственно на элементе <li>:

Видимый номер третьего пункта станет 4, а следующий продолжится с 5. MDN указывает, что value задаёт порядковое значение пункта, а следующие элементы продолжают нумерацию от него; это относится к спискам <ol>, не к <ul> (справка <li>). Атрибут полезен для точечной коррекции, но при обычной вставке целого блока понятнее разделить список и задать start во втором фрагменте.

Не ставьте value на каждый пункт вручную. Тогда порядок придётся синхронизировать при каждом добавлении или удалении шага. И не набирайте номера текстом вроде «4. Обновите предпросмотр» внутри <li>: браузер добавит собственный маркер, а при смене оформления возможны дубли и несоответствие визуального номера структуре списка.

Вставку можно трактовать по-разному. Если изображение объясняет один конкретный шаг, чаще всего логично вложить его внутрь соответствующего <li>: так пояснение останется рядом с действием при адаптивной вёрстке. Если изображение относится ко всей инструкции или к переходу между этапами, разместите <figure> отдельно между двумя <ol>. Текст подписи должен объяснять, что именно смотреть и к какому шагу вернуться.

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

То же правило подходит для кода. Если фрагмент — точное содержимое шага, оставьте его внутри <li> рядом с описанием. Если это альтернативный пример, не включайте его в список как ещё один шаг: поставьте между фрагментами и продолжите список со следующего реального действия. Для сложного примера добавьте короткое пояснение до или после блока, чтобы не спутать код с обязательной командой.

HTML допускает внутри <li> абзацы, вложенные списки и другие элементы, поэтому иногда <ol> можно не закрывать: поместите в текущий пункт связанные текст и иллюстрацию, а после них создайте следующий <li>. Этот вариант особенно уместен, когда вставка буквально иллюстрирует пункт 3 и не образует самостоятельный раздел.

Однако не вкладывайте в <li> длинное самостоятельное эссе или несколько несвязанных карточек только ради непрерывной нумерации. Тогда содержание становится труднее редактировать и воспринимать. Если блок логически находится между шагами, два списка с start обычно яснее. Выбирайте структуру по смыслу, а CSS используйте для оформления отступов и расстояний, не для имитации порядка.

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

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

Подменить порядок CSS-счётчиком. Декоративный ::before может показывать цифру, не совпадающую с порядком элементов в HTML. Применяйте стили к семантическому списку, а не создавайте псевдосписок, если номера необходимы для понимания или ссылок.

Продолжить номер без смыслового перехода. Сам по себе атрибут start="7" не объясняет читателю, почему идут шаги с 7. Добавьте ясный заголовок или короткое предложение о том, что требуется сделать перед продолжением.

Вручную написать номер в каждом пункте. Это создаёт дубли с автоматически выведенными маркерами и ломается при перестановках. Оставляйте содержание <li> только содержанием шага.

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

Да. Атрибут start у <ol> задаёт начальное числовое значение нового фрагмента списка. Например, после трёх действий укажите start="4", и элементы продолжат счёт с четвёртого.

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

start применяется ко всему элементу <ol> и задаёт, с какого числа начинается его нумерация. value меняет порядковое значение конкретного <li>, после чего следующие пункты продолжают счёт от этой точки.

Нет, для <ul> порядковое значение не имеет смысла. Если пункты не образуют последовательность, используйте маркированный список; если на номера нужно ссылаться, используйте <ol>.

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

Обычно нет: браузер выводит маркер из структуры <ol>. Напишите действие внутри <li>, а номер задайте через порядок, start или, при точечной коррекции, value.

Если оно относится к конкретному действию, поместите его внутрь этого <li>. Если оно показывает переход или состояние всей процедуры, разместите <figure> между фрагментами списка и продолжите новый <ol> с нужного числа.

Откройте опубликованную страницу и проверьте первый номер после каждого блока. Дополнительно отключите оформление в инструментах разработчика или просмотрите DOM: второй фрагмент должен оставаться <ol start="…">, а не превращаться в <ul> или абзацы с ручными цифрами.

Сначала решите, продолжается ли одна процедура. Если после иллюстрации или пояснения идут следующие действия, задайте новому <ol> атрибут start; если исправить нужно только один номер — value у <li>. Оставляйте номера семантическими, а смысловые переходы поясняйте словами. Для собственных примеров кириллицы можно создать рукописный шрифт в Fontgenerator, чтобы проверить, как подписи и шаги смотрятся вместе.