HTML тег <ol>

Элемент <ol> (от англ. "ordered list" ‒ «упорядоченный список») создаёт нумерованный (упорядоченный) список. Упорядоченный список может иметь цифровую или буквенную маркировку.

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

Элементы для нумерованных списков определяются с помощью тега <li>, который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию нумерация элементов списка начинается с единицы и каждый следующий элемент, получает номер на одну единицу больше, чем предшествующий. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

Примечание: Если к <ol> применяется CSS свойство, то элементы <li> наследуют эти свойства.

Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Маркированные (неупорядоченные) списки определяются с помощью тега <ul>.

Синтаксис

<ol>
  ...
  <li> ... </li>
  ...
</ol>

Закрывающий тег

Обязателен.

Атрибуты

compactУстарел в HTML5
Сокращает отступы и расстояния между строками.

typeHTML5
Устанавливает вид маркера списка.
reversed
Нумерация в списке становится по убыванию (3,2,1).

startHTML5
Задаёт число, с которого будет начинаться нумерованный список.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <ol> со следующими значениями CSS по умолчанию:

ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

Различия между HTML 4.01 и HTML5

Атрибуты start и type были запрещены в HTML 4.01, но поддерживаются в HTML5.
В HTML5 добавлен новый атрибут reversed, атрибут compact больше не поддерживается в HTML5 .

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

Два разных упорядоченных HTML списка:

Пример HTML:

Попробуй сам
<ol>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Какао</li>
</ol>

<ol start="50">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Какао</li>
</ol>

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

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML 4.01 (W3C) Рекомендация
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

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

Попробуйте сами - Примеры

Как сделать, чтобы список начинался с номера, отличного от 1:
Применение атрибутов type и start

Как изменить номер данного элемента списка:
Применение атрибута value

Как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами:
Применение свойства CSS list-style-type

Как создать вложенные списки:
Вложенные списки

Учебник HTML

HTML уроки: HTML Списки

HTML Элементы



Contema