HTML · справочник

Теги ol и li: нумерованный список

Нумерованный список подходит, когда порядок пунктов имеет значение: инструкция, рейтинг, этапы регистрации или рецепт. Каждый пункт записывается в отдельном li.

Базовая разметка

Браузер сам добавляет номера, поэтому их не нужно писать в тексте вручную. При перестановке пунктов нумерация обновится автоматически.

<ol>
  <li>Создать файл index.html</li>
  <li>Добавить структуру документа</li>
  <li>Открыть файл в браузере</li>
</ol>

Начало и обратный порядок

Атрибут start задаёт первый номер. reversed включает обратный отсчёт. Это полезно, когда список является продолжением или показывает места рейтинга сверху вниз.

<ol start="4">
  <li>Подключить стили</li>
  <li>Проверить страницу</li>
</ol>

<ol reversed>
  <li>Бронза</li>
  <li>Серебро</li>
  <li>Золото</li>
</ol>

Вложенные списки

Внутренний список помещается внутрь нужного li. Он может быть нумерованным или маркированным. Не оставляй вложенный ol соседним элементом вне пункта.

<ol>
  <li>Подготовить проект
    <ul>
      <li>Создать папку</li>
      <li>Добавить файлы</li>
    </ul>
  </li>
</ol>

Частые ошибки

• Писать номера вручную внутри li.
• Использовать ol для обычного меню.
• Размещать текст напрямую внутри ol без li.
• Начинать новый список вместо продолжения со start.

Связанные темы

Маркированный список · Семантика HTML