<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.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
olChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
compact
УстаревшаяНестандартная
Chrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
reversedChrome Полная поддержка 18Edge ? Firefox Полная поддержка 18IE Нет поддержки НетOpera Полная поддержка ДаSafari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 18Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
startChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
typeChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах

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

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