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

Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023