Нумерованный список HTML ol

Введение

Нумерованные списки в HTML помогают структурировать информацию, которая важна именно в определённом порядке — шаги инструкции, список задач по приоритету, план урока, оглавление и многое другое. В HTML за такие списки отвечает тег <ol> (ordered list — «упорядоченный список»).

Здесь мы подробно разберём, как работать с <ol>:

• как правильно создавать нумерованные списки;
• как управлять начальным номером и типом нумерации;
• как делать вложенные списки;
• как комбинировать <ol> с CSS;
• какие есть особенности доступности и семантики.

Давайте разбираться по шагам и смотреть на живые примеры.

Базовый синтаксис нумерованного списка <ol>

Структура тега <ol>

Базовый нумерованный список в HTML состоит из трёх основных частей:

• контейнер списка — <ol>...</ol>;
• элементы списка — <li>...</li>;
• содержимое элементов — текст, ссылки, другие теги.

Простейший пример:

<ol>
  <li>Подготовить данные</li> <!-- Первый пункт списка -->
  <li>Обработать данные</li>  <!-- Второй пункт списка -->
  <li>Сохранить результат</li> <!-- Третий пункт списка -->
</ol>

Браузер автоматически проставит номера 1, 2, 3. Вам не нужно писать их руками в HTML — они генерируются визуально, а не являются частью текста.

Семантика <ol> и когда его использовать

Важно понимать, зачем именно использовать <ol>, а не <ul> (ненумерованный список):

• <ol> — когда порядок элементов имеет значение:
  • шаги инструкции;
  • последовательность действий;
  • рейтинг (топ-10 чего-либо);
  • приоритеты задач.
• <ul> — когда порядок неважен:
  • набор характеристик;
  • список ссылок;
  • набор опций или свойств.

Например, инструкция по установке программы должна быть в <ol>, потому что шаги зависят от порядка.

<ol>
  <li>Скачать установочный файл</li>
  <li>Запустить установщик</li>
  <li>Следовать инструкциям мастера установки</li>
  <li>Перезагрузить компьютер при необходимости</li>
</ol>

Здесь я использую <ol>, потому что, если поменять местами шаги, инструкция станет некорректной.

Обязательные и необязательные теги внутри <ol>

Внутри <ol> должны находиться только элементы <li> (или, в более сложных случаях, <script> и <template>, но это используется редко).

Так писать корректно:

<ol>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ol>

Так делать нежелательно:

<ol>
  Текст вне li <!-- Некорректно с точки зрения спецификации -->
  <li>Пункт</li>
</ol>

Браузер, скорее всего, «доправит» такую разметку, но для чистого и предсказуемого HTML лучше всегда оборачивать содержимое в <li>.

Атрибуты <ol> и управление нумерацией

Тег <ol> поддерживает несколько полезных атрибутов, с помощью которых вы можете контролировать внешний вид и логику нумерации:

• type — тип нумерации (цифры, буквы, римские числа);
• start — начальный номер списка;
• reversed — обратный порядок нумерации.

Давайте рассмотрим каждый по отдельности.

Атрибут type — тип маркеров

С помощью атрибута type можно задать вид нумерации:

• type="1" — арабские цифры (1, 2, 3) — значение по умолчанию;
• type="a" — строчные латинские буквы (a, b, c);
• type="A" — заглавные латинские буквы (A, B, C);
• type="i" — строчные римские цифры (i, ii, iii);
• type="I" — заглавные римские цифры (I, II, III).

Пример:

<h3>Список с цифрами</h3>
<ol type="1">
  <li>Открыть настройки</li>
  <li>Изменить язык интерфейса</li>
  <li>Сохранить изменения</li>
</ol>

<h3>Список с буквами</h3>
<ol type="a">
  <li>Красный цвет</li>
  <li>Зелёный цвет</li>
  <li>Синий цвет</li>
</ol>

<h3>Список с римскими числами</h3>
<ol type="I">
  <li>Введение</li>
  <li>Основная часть</li>
  <li>Приложения</li>
</ol>

Комментарии к примеру:

• Я показываю несколько <ol> подряд, чтобы вы увидели разницу.
• Атрибут type влияет только на отображение, а не на семантику. Для поисковиков и скринридеров это всё равно упорядоченный список.

Атрибут start — начальное значение нумерации

Иногда вам нужно начать нумерацию не с 1, а, например, с 4 или 10. Для этого используется атрибут start.

<!-- Здесь нумерация начнется с 4 -->
<ol start="4">
  <li>Четвёртый шаг</li>
  <li>Пятый шаг</li>
  <li>Шестой шаг</li>
</ol>

Полезные сценарии:

• Разделение длинного списка на части, но с сохранением общей нумерации.
• Продолжение списка после текста или иллюстраций.
• Применение в документах, где нумерация регламентирована (ГОСТы, инструкции).

Например:

<p>В предыдущем разделе мы рассмотрели первые три шага настройки. Теперь продолжим.</p>

<ol start="4">
  <li>Настроить резервное копирование</li>
  <li>Включить проверки безопасности</li>
  <li>Проверить лог работы системы</li>
</ol>

Атрибут reversed — обратная нумерация

Если вы хотите, чтобы список нумеровался в обратном порядке (например, отсчёт от 10 до 1), можно использовать атрибут reversed.

<!-- Обратная нумерация: 3, 2, 1 -->
<ol reversed>
  <li>Бронза</li>
  <li>Серебро</li>
  <li>Золото</li>
</ol>

Браузер автоматически посчитает количество элементов и выведет номера в обратном направлении.

Вы можете также совместить reversed и start, чтобы задать верхнюю границу:

<!-- Нумерация от 10 вниз: 10, 9, 8 -->
<ol reversed start="10">
  <li>Пункт с номером 10</li>
  <li>Пункт с номером 9</li>
  <li>Пункт с номером 8</li>
</ol>

Здесь:

• reversed говорит «считать вниз»;
• start="10" задаёт начальное значение.

Элемент <li> в нумерованном списке

Содержимое <li>

Элемент <li> внутри <ol> может содержать не только простой текст, но и:

• абзацы (<p>);
• заголовки (<h2>, <h3> и т.д.);
• изображения (<img>);
• вложенные списки (<ol>, <ul>);
• блоки (<div>) и другие элементы.

Посмотрите, я привожу пример более «богатого» содержимого:

<ol>
  <li>
    <h3>Установка программы</h3>
    <p>Сначала скачайте установочный файл с официального сайта.</p>
    <p>Затем запустите его от имени администратора.</p>
  </li>
  <li>
    <h3>Первичный запуск</h3>
    <p>При первом запуске введите лицензионный ключ.</p>
    <p>После активации программа создаст начальные настройки.</p>
  </li>
</ol>

Комментарии к примеру:

• Каждый <li> может быть целой мини-секцией с заголовком и несколькими абзацами.
• Номер списка относится ко всему блоку <li> целиком.

Атрибут value на <li>

Помимо атрибутов на <ol>, вы можете управлять нумерацией прямо на отдельных <li> с помощью атрибута value.

<ol>
  <li>Пункт номер 1</li>
  <li value="5">Пункт номер 5</li> <!-- Нумерация перескочит на 5 -->
  <li>Следующий пункт будет номер 6</li>
</ol>

Что здесь происходит:

• Первый <li> получает номер 1.
• Второй принудительно помечен номером 5.
• Третий продолжает нумерацию и получает номер 6.

Будьте осторожны с value:

• Используйте его, когда это действительно оправдано (например, в юридических документах или стандартах, где пункты прерываются).
• Старайтесь не злоупотреблять перескоками ради визуального эффекта — это может запутать пользователей и скринридеры.

Вложенные и сложные нумерованные списки

Вложенные <ol> внутри <li>

Один из частых сценариев — это многоуровневые списки: пункты, подпункты, подподпункты и так далее.

В HTML для этого достаточно вложить один <ol> внутрь <li> другого списка.

<ol>
  <li>
    Подготовка
    <ol>
      <li>Собрать требования</li>
      <li>Определить ресурсы</li>
      <li>Назначить ответственных</li>
    </ol>
  </li>
  <li>
    Реализация
    <ol>
      <li>Разработать прототип</li>
      <li>Провести тестирование</li>
      <li>Запустить в эксплуатацию</li>
    </ol>
  </li>
</ol>

В этом коде:

• Внешний <ol> задаёт верхний уровень нумерации (1, 2).
• Внутренние <ol> создают нумерованные подпункты (1.1, 1.2 и т.д. визуально, если так настроить стили). По умолчанию браузер может отобразить их как 1, 2, 3, но с отступом.

Управление стилем вложенной нумерации через type

Чтобы уровни выглядели различимо, можно использовать разные type на разных уровнях вложенности.

<ol type="1">
  <li>
    Раздел 1
    <ol type="a">
      <li>Подраздел 1a</li>
      <li>Подраздел 1b</li>
    </ol>
  </li>
  <li>
    Раздел 2
    <ol type="i">
      <li>Подраздел 2i</li>
      <li>Подраздел 2ii</li>
    </ol>
  </li>
</ol>

Так вы визуально разграничиваете уровни:

• основной уровень — цифры;
• второй уровень — буквы;
• третий (если понадобится) — римские цифры и т.п.

Семантическая глубина вложенности

Технически вы можете делать очень глубокие вложенные списки. Но есть практические ограничения:

• пользователям сложно воспринимать больше 3–4 уровней;
• стили могут стать запутанными;
• на маленьких экранах длинные и вложенные списки плохо читаются.

Хорошая практика — подумать, можно ли часть вложенности заменить заголовками и отдельными секциями.

Оформление <ol> с помощью CSS

Базовые стили для <ol> и <li>

По умолчанию браузеры задают свои стили для <ol>: отступы слева, тип нумерации и т.д. Вы можете переопределить их через CSS.

Посмотрите, я покажу базовый пример:

<style>
  ol.custom-list {
    margin-left: 2rem;        /* Отступ слева */
    padding-left: 1rem;       /* Внутренний отступ слева */
    list-style-type: decimal; /* Тип нумерации - цифры */
  }

  ol.custom-list li {
    margin-bottom: 0.5rem;    /* Отступ между элементами списка */
  }
</style>

<ol class="custom-list">
  <li>Пункт один</li>
  <li>Пункт два</li>
  <li>Пункт три</li>
</ol>

Ключевые моменты:

• list-style-type для <ol> может дублировать HTML-атрибут type, но это уже CSS-вариант:
  • decimal — 1, 2, 3;
  • lower-alpha — a, b, c;
  • upper-alpha — A, B, C;
  • lower-roman — i, ii, iii;
  • upper-roman — I, II, III.
• Стили через CSS предпочтительнее, если вы хотите иметь единый контроль над оформлением во всём проекте.

Сброс маркеров и собственная нумерация

Иногда нужно полностью убрать стандартные номера, а вместо них вывести свои — например, с помощью счётчиков CSS.

Шаг 1. Скрываем стандартную нумерацию:

ol.no-default {
  list-style: none;    /* Убираем стандартные маркеры и отступ для них */
  padding-left: 0;     /* Сбрасываем внутренний отступ */
}

Шаг 2. Добавляем собственную нумерацию с помощью CSS-счётчика:

<style>
  ol.custom-counter {
    list-style: none;         /* Убираем стандартные маркеры */
    counter-reset: step;      /* Объявляем счётчик с именем step и обнуляем его */
    padding-left: 0;          /* Убираем отступ слева */
  }

  ol.custom-counter li {
    counter-increment: step;  /* Увеличиваем счётчик на 1 для каждого li */
    margin-bottom: 0.5rem;    /* Отступ между пунктами */
  }

  ol.custom-counter li::before {
    content: counter(step) ". "; /* Выводим число и точку перед текстом */
    font-weight: bold;           /* Делаем номер жирным */
    margin-right: 0.25rem;       /* Небольшой отступ справа */
  }
</style>

<ol class="custom-counter">
  <li>Первый шаг</li>   <!-- Покажет "1. Первый шаг" -->
  <li>Второй шаг</li>   <!-- Покажет "2. Второй шаг" -->
  <li>Третий шаг</li>   <!-- Покажет "3. Третий шаг" -->
</ol>

Комментарии:

• Я использую counter-reset и counter-increment, чтобы управлять счётчиком на уровне CSS.
• Псевдоэлемент ::before отвечает за отображение номера.
• Такой подход даёт больше гибкости — вы можете, например, вставлять текст вроде «Шаг 1», «Шаг 2» и т.п.

Выравнивание и отступы

Если в списке длинный текст, стандартные отступы могут выглядеть неаккуратно. Можно выровнять текст по номеру или задать фиксированный отступ.

Например:

<style>
  ol.aligned {
    list-style-position: outside; /* Маркер снаружи блока li - значение по умолчанию */
    padding-left: 1.5rem;         /* Управляем общим отступом слева */
  }

  /* Дополнительно можно настроить отображение маркеров */
  ol.aligned li {
    padding-left: 0.25rem;        /* Чуть отодвинем текст от маркера */
  }
</style>

<ol class="aligned">
  <li>Краткий пункт</li>
  <li>Пункт с длинным текстом который переносится на следующую строку и нам важно чтобы начало текста после переноса выравнивалось по вертикали аккуратно</li>
</ol>

Если вы хотите более сложное выравнивание (например, кастомные номера в отдельной колонке), можно использовать CSS Grid или Flexbox, но это уже выходит за пределы базового использования <ol> и больше относится к вёрстке макетов.

Доступность и лучшие практики использования <ol>

Почему важно использовать <ol>, а не просто цифры в тексте

Иногда разработчики пытаются сделать «список» вот так:

<p>1. Первый пункт</p>
<p>2. Второй пункт</p>
<p>3. Третий пункт</p>

С точки зрения визуального отображения это похоже на список, но:

• скринридеры не распознают структуру как список;
• браузер не сможет автоматически менять маркеры или стиль;
• сложно изменять порядок элементов без переписывания текста.

Использование <ol>:

• даёт чёткую семантику;
• улучшает доступность;
• облегчает стилизацию и поддержку кода.

<ol> и скринридеры

Семантический <ol> сообщает скринридеру:

• что это упорядоченный список;
• сколько в нём элементов;
• какой порядок у элементов.

Пользователь, использующий скринридер, услышит не просто подряд идущий текст, а структуру:

• «Список из трёх элементов»;
• «Первый элемент, текст: ...»;
• «Второй элемент, текст: ...» и так далее.

Поэтому важно:

• не разрывать <li> лишними тегами, которые ломают структуру;
• не имитировать нумерацию с помощью чистого текста.

Взаимодействие с заголовками и разделами

Нумерованные списки хорошо сочетаются с заголовками уровней h2, h3 и так далее. Например:

<h2>Порядок установки</h2>
<ol>
  <li>Загрузите установочный файл</li>
  <li>Запустите установщик</li>
  <li>Следуйте шагам мастера установки</li>
</ol>

<h2>Дополнительные действия</h2>
<ol>
  <li>Настройте автоматическое обновление</li>
  <li>Включите уведомления о событиях</li>
</ol>

Здесь:

• заголовки обозначают разделы;
• <ol> внутри каждого раздела описывает последовательность действий в рамках этого раздела.

Это делает структуру страницы понятной и логичной, как для людей, так и для машин.

Комбинирование <ol> и <ul>

В реальных документах часто встречаются смешанные списки: основной порядок (нумерованный) и внутри — перечисления без строгого порядка (маркированные).

<ol>
  <li>
    Шаг 1. Подготовка окружения
    <ul>
      <li>Установить Python</li>
      <li>Настроить виртуальное окружение</li>
      <li>Установить зависимости из файла requirements.txt</li>
    </ul>
  </li>
  <li>
    Шаг 2. Запуск приложения
    <ul>
      <li>Выполнить команду запуска сервера</li>
      <li>Открыть браузер и перейти по адресу http://localhost</li>
    </ul>
  </li>
</ol>

Здесь:

• <ol> задаёт общий порядок шагов;
• <ul> внутри каждого шага описывает опции или поддействия, у которых порядок неважен.

Такой подход делает структуру чёткой и логичной.

Примеры реального использования <ol>

Инструкция по установке

<h2>Инструкция по установке приложения</h2>

<ol>
  <li>Скачайте архив с программой с официального сайта.</li>
  <li>Распакуйте архив в отдельную папку.</li>
  <li>Запустите исполняемый файл установки.</li>
  <li>Следуйте шагам мастера установки.</li>
  <li>После завершения установки перезагрузите систему при необходимости.</li>
</ol>

Такой список чётко показывает очередность действий.

План урока или лекции

<h2>План лекции</h2>

<ol type="I">
  <li>Введение в тему</li>
  <li>Основные определения и понятия</li>
  <li>Практические примеры</li>
  <li>Ответы на вопросы</li>
</ol>

Использование римских цифр (type="I") помогает визуально отделить план от обычных перечней.

Юридические документы и подпункты

<ol>
  <li>
    Общие положения
    <ol type="a">
      <li>Область применения документа</li>
      <li>Определения используемых терминов</li>
    </ol>
  </li>
  <li>
    Права и обязанности сторон
    <ol type="a">
      <li>Права исполнителя</li>
      <li>Обязанности исполнителя</li>
      <li>Права заказчика</li>
      <li>Обязанности заказчика</li>
    </ol>
  </li>
</ol>

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

Распространённые ошибки и как их избежать

Использование <ol> без <li>

Некоторые разработчики забывают добавить <li> и пишут так:

<ol>
  Первый пункт
  Второй пункт
</ol>

Браузер постарается интерпретировать это как список, но:

• разметка будет некорректной;
• поведение в разных браузерах может отличаться;
• доступность ухудшается.

Правильный вариант:

<ol>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ol>

Смешивание ручной нумерации с <ol>

Иногда коды встречаются такие:

<ol>
  <li>1. Первый пункт</li>
  <li>2. Второй пункт</li>
</ol>

Здесь:

• браузер уже сам добавит 1 и 2;
• вы дублируете номера внутри текста;
• если поменять порядок или добавить пункт, нумерация в тексте станет неверной.

Лучше:

<ol>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ol>

Если же вам нужно показательное оформление вроде «Шаг 1», лучше использовать CSS-счётчики, как мы разбирали выше.

Чрезмерная вложенность

Технически можно сделать так:

<ol>
  <li>
    Пункт 1
    <ol>
      <li>
        Подпункт 1.1
        <ol>
          <li>Уровень 3</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Но на практике:

• больше 3 уровней воспринимать сложно;
• вёрстка может «поехать» при изменении размеров экрана;
• пользователям будет неудобно читать.

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

Заключение

Тег <ol> в HTML — это базовый, но очень важный инструмент для структурирования информации, которая имеет порядок. Правильное использование нумерованных списков:

• делает ваши документы логичными и читаемыми;
• улучшает доступность и семантику страницы;
• облегчает поддержку и изменение структуры.

Вы можете управлять типом нумерации (type), начальным значением (start), направлением (reversed), комбинировать <ol> с вложенными списками, стилями CSS и заголовками. Главное — следить за аккуратной разметкой (<li> внутри <ol>), не дублировать номера в тексте и помнить о пользователях, которые читают ваш контент с помощью вспомогательных технологий.

Если вы будете осознанно выбирать между <ol> и <ul>, а также грамотно использовать атрибуты и стили, нумерованные списки станут удобным и гибким инструментом в вашей вёрстке.

Частозадаваемые технические вопросы по теме и ответы

Как сделать так, чтобы разные списки на странице продолжали общую нумерацию?

HTML сам по себе не «связывает» списки. Есть два варианта:

1. Жёстко задать start: ```html

   1. Пункт 1
   2. Пункт 2
   3. Пункт 3
   4. Пункт 4

   ``` Здесь вы вручную контролируете начало.

2. Использовать CSS-счётчики на уровне контейнера:

   • Завести один счётчик на весь документ.
   • В каждом списке использовать counter-increment и ::before. Это уже больше про CSS и требует единого шаблона.

Как сделать многоуровневую нумерацию вида 1.1, 1.2, 2.1 и т.д.?

Через чистый HTML <ol> это не настраивается. Нужен CSS:

1. Для каждого уровня списка вводите отдельный счётчик (section, subsection).
2. На верхнем уровне увеличиваете section и сбрасываете subsection.
3. На втором уровне увеличиваете subsection и выводите content: counter(section) "." counter(subsection);.

Такой подход требует аккуратной CSS-настройки, но даёт нужный вид нумерации.

Можно ли сделать нумерацию по русскому алфавиту (а, б, в, г)?

Стандартные значения list-style-type и type не поддерживают русские буквы. Есть варианты:

• Задать список «вручную» через CSS-счётчики и таблицу соответствий (сложнее);
• Использовать обычную цифру в CSS-счётчике и подставлять букву через JavaScript по номеру;
• Либо не пытаться эмулировать русские буквы, а оставить стандартную цифровую нумерацию.

Чисто HTML/CSS решения без костылей для кириллической нумерации нет.

Как убрать нумерацию у конкретного элемента <li, но оставить отступ?

HTML-атрибутами это не сделать. Используйте CSS:

1. Укажите класс на нужном элементе: html <ol> <li>Пункт 1</li> <li class="no-marker">Пункт без номера</li> <li>Пункт 3</li> </ol>
2. В CSS: css li.no-marker { list-style: none; /* Убирает маркер */ } Учтите — при этом нумерация других элементов не перескочит; «невидимый» пункт всё равно считается в общем порядке.

Как сделать, чтобы при клике на номер список прокручивался к пункту?

Для этого:

1. Оберните текст пункта в элемент с id: html <ol> <li id="step-1">Первый шаг</li> <li id="step-2">Второй шаг</li> </ol>
2. Создайте отдельный список ссылок на эти пункты: html <ol> <li><a href="#step-1">Шаг 1</a></li> <li><a href="#step-2">Шаг 2</a></li> </ol>
3. Браузер сам прокрутит страницу к нужному id при клике.

Так вы получите кликабельную нумерацию без дополнительного JavaScript.