<ol>: The Ordered List element

HTML-элемент <ol> используется для упорядоченного списка — в частности для пронумерованного списка.

Категории контента Основной поток, и если дочерний элемент <ol> включает в себя хотя бы один элемент <li>, явный контент.
Разрешённое содержимое Ноль или больше <li> элементов, которые, в свою очередь, содержат вложенные элементы <ol> или <ul>.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Разрешённые родители Любой элемент, который принимает основной поток.
Разрешённые ARIA-роли directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation
DOM-интерфейс HTMLOListElement

Свойства

Этот элемент включает глобальные атрибуты.

reversed
Атрибут логического значения (bool)  показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.
start
Нумерация начнется с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация type в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы "г" или Римской "iv", используйте start="4".
type
Задаёт тип нумерации:
  • a для строчных букв
  • A для заглавных букв
  • i для строчной Римской нумерации
  • I для заглавной Римской нумерации
  • 1 для цифр (по умолчанию)

указанный тип используется для всего списка, если только не указан любой другой аттрибут type в элементе <li>.

Note: Если тип цифр в списке не имеет значения (к примеру,  юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство CSS list-style-type.

Заметки об использовании

Обычно, элементы списка отображены с маркером, предшествующим цифрам или буквам.

Элементы <ol> и <ul> могут быть вложены (nested) на любом уровне, чередуясь между элементами <ol> и <ul>.

Оба элемента <ol> и <ul>  используются для списков. Различие лишь в том, что в элементе <ol> порядок имеет значение, как в данных примерах:

  • Инструкции рецепта
  • Направление по заданному маршруту
  • Список ингридиентов на информации о питании, в убывающих пропорциях.

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

Примеры

Обычный список

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

Результат HTML кода выше:

Список с Римскими числами

<ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol> 

Результат HTML кода выше:

Используя свойство start

<p>Finishing places of contestants not in the winners’ circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

Результат HTML кода выше:

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

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

Результат HTML кода выше:

Неупорядоченный список внутри упорядоченного списка

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

Результат HTML кода выше:

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

Спецификация Статус Комментарий
HTML Living Standard
Определение '<ol>' в этой спецификации.
Живой стандарт Без изменений с последнего W3C, HTML5.
HTML5
Определение 'HTMLOListElement' в этой спецификации.
Рекомендация Добавлено reversed и приписан start; возможно использование type
HTML 4.01 Specification
Определение '<ol>' в этой спецификации.
Рекомендация Были убраны compact и type.

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

BCD tables only load in the browser

Смотрите также

  • Другие элементы HTML списка: <ul>, <li>, <menu>
  • CSS свойства, которые могут быть полезны для стилизации <ol> элемента:
    • свойство list-style, для порядковых показов
    • CSS счётчики, для более сложных вложенных списков
    • свойство line-height, для замены убранного свойства compact
    • Свойство margin, для контроля отступа в списке