<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
. Однако так делать не рекомендуется.
Актуальность
Тег <ol>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023