Тег <ol>

Тег <ol> (укр. – “нумерований список”) використовується в HTML для створення нумерованих (упорядкованих) списків, де кожен елемент автоматично пронумерований браузером. Це зручно для відображення послідовностей, де порядок елементів є важливим, наприклад, для кроків інструкції або рейтингових списків.

Кожен елемент списку визначається за допомогою тега <li> (елемент списку). Тег <ol> автоматично нумерує всі елементи списку у порядку їх додавання. Наприклад:

<ol>
  <li>Перший крок</li>
  <li>Другий крок</li>
  <li>Третій крок</li>
</ol>

У цьому прикладі браузер автоматично відобразить список із нумерацією:

1. Перший крок
2. Другий крок
3. Третій крок

HTML також підтримує вкладені списки, де можна комбінувати нумеровані та ненумеровані списки:

<ul>
  <li>Автор: Джордж Орвелл</li>
  <li>Автор: Джек Лондон
    <ol>
      <li>Книга: Поклик предків</li>
      <li>Книга: Біла Ікло</li>
    </ol>
  </li>
  <li>Автор: Ернест Хемінгуей</li>
</ul>

Атрибути

Специфічні атрибути

• type — визначає тип нумерації. За замовчуванням використовується звичайна числова нумерація, але можна вибрати інші варіанти:
  • 1 — числа (за замовчуванням);
  • A — великі літери (A, B, C…);
  • a — малі літери (a, b, c…);
  • I — великі римські цифри (I, II, III…);
  • i — малі римські цифри (i, ii, iii…).

Наприклад:

<ol type="A">
  <li>Перший пункт</li>
  <li>Другий пункт</li>
  <li>Третій пункт</li>
</ol>

У цьому випадку елементи будуть пронумеровані великими літерами: A. Перший пункт B.

Хоча і є можливість визначати тип нумерації для списку через атрибут type, кращою практикою вважається робити це через CSS.

• start — дозволяє задати початковий номер для нумерації списку. За замовчуванням нумерація починається з 1, але можна змінити це значення. Наприклад:

<ol start="5">
  <li>Пункт п'ятий</li>
  <li>Пункт шостий</li>
</ol>

Цей список почнеться з числа 5

• reversed — атрибут, що дозволяє створювати зворотну нумерацію списку (від найбільшого до найменшого). Наприклад:

<ol reversed>
  <li>пункт під номером 3</li>
  <li>пункт під номером 2</li>
  <li>пункт під номером 1</li>
</ol>

Відобразиться список із зворотною нумерацією.

Глобальні атрибути

Найпопулярніші глобальні атрибути, які використовуються на нумерованих списках:

• id — унікальний ідентифікатор елемента на сторінці, який можна використовувати для посилань, стилізації або JavaScript-операцій;
• class — клас, який допомагає стилізувати або групувати елементи;
• style — атрибут для інлайн-стилізації конкретного елемента;
• title — текстова підказка, що з’являється при наведенні курсору на список;
• lang — атрибут для вказання мови вмісту елементу;
• dir — атрибут, який вказує напрямок тексту (наприклад, “ltr” — зліва направо, “rtl” — справа наліво).

Приклад використання

<ol id="my-list" class="numbered-list" style="color: red;" title="Мій нумерований список">
  <li>Пункт перший</li>
  <li>Пункт другий</li>
</ol>

Додаткові моменти

• Тег <ol> є парним елементом, тому його потрібно обов’язково закривати;
• Нумеровані списки використовуються там, де важливий порядок елементів (наприклад, інструкції, рейтинги або кроки процесу);
• За допомогою CSS можна змінювати вигляд нумерації або використовувати інші стилі для списків;
• Вкладені нумеровані списки допомагають організувати складну інформацію, поділяючи її на ієрархічні рівні;
• Використовуйте списки для логічної організації інформації на сторінці, де порядок елементів є важливим (на відміну від ненумерованого списку <ul>).