<ol> Элемент HTML упорядоченного списка

Элемент <ol> HTML представляет собой упорядоченный список элементов — обычно отображаемый в виде нумерованного списка.

Попробуйте

<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;
}

Атрибуты

Этот элемент также поддерживает глобальные атрибуты.

compact

Этот логический атрибут указывает, что список следует отображать в компактном виде. Интерпретация этого атрибута зависит от браузера. Вместо него используйте CSS: чтобы добиться эффекта, подобного эффекту атрибута compact, можно задать свойству CSS line-height значение 80%.

reversed

Этот логический атрибут указывает, что элементы списка перечислены в обратном порядке. Нумерация элементов будет идти от большего к меньшему.

start

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

type

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

• a для строчных букв
• A для прописных букв
• i для строчных римских цифр
• I для прописных римских цифр
• 1 для чисел (по умолчанию)

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

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

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

Элементы упорядоченного списка обычно отображаются с предшествующим маркером, например числом или буквой.

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

Элементы <ol> и <ul> представляют список элементов. Разница заключается в том, что порядок элементов в списке <ol> имеет значение. Например:

• Шаги в рецепте
• Пошаговые инструкции
• Список ингредиентов на этикетках пищевой ценности, упорядоченный по убыванию доли

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

Примеры

Простой пример

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

Результат

Использование римской нумерации

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

Результат

Использование атрибута 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>

Результат

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

<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is 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>

Результат

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

<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is 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-элементы, связанные со списками: <ul>, <li>, <menu>
• Свойства CSS, которые могут быть особенно полезны для оформления элемента <ol>:
  • свойство list-style позволяет выбрать способ отображения порядкового номера
  • Счётчики CSS помогают обрабатывать сложные вложенные списки
  • свойство line-height позволяет имитировать устаревший атрибут compact
  • свойство margin позволяет управлять отступом списка