<ol>: The Ordered List element

Интерактивный пример

<ol> <li>Mix flour, baking powder, sugar, and salt.</li> <li>In another bowl, mix eggs, milk, and oil.</li> <li>Stir both mixtures together.</li> <li>Fill muffin tray 3/4 full.</li> <li>Bake for 20 minutes.</li> </ol> 

li { font: 1rem "Fira Sans", sans-serif; margin-bottom: 0.5rem; } 

Свойства

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

reversed

Атрибут логического значения (bool) показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.

start

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

type

Задаёт тип нумерации:

• a для строчных букв
• A для заглавных букв
• i для строчной Римской нумерации
• I для заглавной Римской нумерации
• 1 для цифр (по умолчанию)указанный тип используется для всего списка, если только не указан любой другой атрибут type в элементе <li>.

  Примечание: Если тип цифр в списке не имеет значения (к примеру, юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство 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 списка: <ul>, <li>, <menu>
• CSS-свойства, которые могут быть полезны для стилизации <ol> элемента:
  • свойство list-style, для порядковых показов,
  • CSS-счётчики, для более сложных вложенных списков,
  • свойство line-height, для замены убранного свойства compact,
  • свойство margin, для контроля отступа в списке.