<ol> – елемент упорядкованого списку

Елемент HTML <ol> ("ordered list" – упорядкований список) представляє упорядкований список елементів, що зазвичай візуалізується як пронумерований список.

Спробуйте його в дії

Атрибути

Цей елемент також приймає глобальні атрибути.

reversed

Цей булів атрибут задає те, що елементи списку мають зворотний порядок. Елементи будуть нумеруватися у зворотному порядку.

start

Ціле число, від якого почнеться нумерація елементів списку. Це завжди арабське число (1, 2, 3 тощо), навіть тоді, коли тип нумерації — літери або римські числа. Наприклад, щоб почати нумерацію елементів з літери «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>Мі</li>
  <li>Ме</li>
  <li>Ма</li>
  <li>Мо</li>
  <li>Му</li>
</ol>

Результат

Використання типу з римськими числами

<ol type="i">
  <li>Вступ</li>
  <li>Список скарг</li>
  <li>Висновок</li>
</ol>

Результат

Використання атрибута start

<p>Фінішні місця учасників, які не здобули призових місць:</p>

<ol start="4">
  <li>Панчук (Острог)</li>
  <li>Серко (Дубовицький район)</li>
  <li>Фокін (м. Вараш)</li>
</ol>

Результат

Вкладення списків

<ol>
  <li>перший елемент</li>
  <li>
    другий елемент
    <!-- кінцевий тег </li> – не тут! -->
    <ol>
      <li>другий елемент, перший піделемент</li>
      <li>другий елемент, другий піделемент</li>
      <li>другий елемент, третій піделемент</li>
    </ol>
  </li>
  <!-- Ось де кінцевий тег </li> -->
  <li>третій елемент</li>
</ol>

Результат

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

<ol>
  <li>перший елемент</li>
  <li>
    second item
    <!-- кінцевий тег </li> – не тут! -->
    <ul>
      <li>другий елемент, перший піделемент</li>
      <li>другий елемент, другий піделемент</li>
      <li>другий елемент, третій піделемент</li>
    </ul>
  </li>
  <!-- Ось де кінцевий тег </li> -->
  <li>третій елемент</li>
</ol>

Результат

Технічний підсумок

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

Сумісність із браузерами

Дивіться також

• Інші елементи HTML, пов'язані зі списками: <ul>, <li>, <menu>

• Властивості CSS, що можуть бути особливо корисними для стилізації елемента <ol>:

  • властивість list-style, щоб вибрати спосіб відображення порядкового номера
  • [Лічильники CSS], щоб впорядкувати складні вкладені списки
  • властивість line-height, щоб імітувати нерекомендований атрибут compact
  • властивість margin, щоб керувати відступом списку