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

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

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

reversed

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

start

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

type

Устанавливает тип нумерации:

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

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

Примечание: Если тип нумерации списка не важен (например, в юридических или технических документах, где элементы ссылаются по номеру/букве), используйте свойство 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>

Результат

<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, для управления отступом списка