<ol>

25 января 2023

Что делает тег

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

Синтаксис тега <ol>

<ol>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ol>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

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

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

Простой упорядоченный список. Нумерация начинается с единицы:

<ol>
  <li>Проснуться</li>
    <li>Одеться</li>
  <li>Умыться</li>
  <li>Позавтракать</li>
</ol>

Использование атрибута type для изменения внешнего вида списка. Вместо арабских цифр будут римские:

<ol type="I">
  <li>Римская единица</li>
  <li>Римская двойка</li>
  <li>Римская тройка</li>
</ol>

Использование атрибута start для указания начального значения порядкового номера. Нумерация начнётся с четвёрки:

<ol start="4">
  <li>Четвёртый пункт</li>
  <li>Пятый пункт</li>
  <li>Шестой пункт</li>
</ol>

Для чего использовать тег <ol>

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

Атрибуты тега <ol>

type — вид нумерации списка: арабские и римские цифры, латинские буквы.

start — с какого числа начинается нумерация списка.

reversed — нумерация элементов списка в обратном порядке.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <ol> может содержать только элементы <li>.

Нюансы

При создании нумерованного списка обязательно нужно использовать тег <li> для каждого элемента списка.
Если нужно создать список без нумерации, используйте тег <ul> вместо <ol>.

Поддержка браузерами

Тег поддерживается всеми современными браузерами. Актуальная информация — на caniuse.

Альтернативные теги

Тег <ul> — используется для создания маркированного списка.

Чем заменить тег

Чтобы создать список без нумерации, воспользуйтесь тегом <ul>. Если же вам не нужно создавать список вообще, можете разместить элементы внутри обычного текстового блока, который соответствует логике и структуре вашей страницы. Также создать нумерованный «список» можно с помощью таблиц или блоков <div> с CSS-свойством counter-increment. Однако так делать не рекомендуется.