Урок 13 із 239
5%
← Назад

Упорядковані списки в HTML

Навчіться створювати нумеровані списки за допомогою тегів ol та li.

Упорядковані списки в HTML

Окрім неупорядкованих списків, у HTML існують упорядковані списки. У них кожен пункт має номер замість звичайного маркера у вигляді крапки.

Упорядковані списки використовуються тоді, коли важлива послідовність елементів. Наприклад: кроки інструкції, порядок виконання дій або рейтинг.

Теги ol та li

Для створення упорядкованого списку використовується тег ol. Кожен окремий пункт списку, як і раніше, створюється за допомогою тега li.

<ol>
  <li>Крок перший</li>
  <li>Крок другий</li>
  <li>Крок третій</li>
  <li>Крок четвертий</li>
  <li>Крок п'ятий</li>
</ol>

Головна перевага упорядкованих списків — браузер сам керує нумерацією. Якщо додати або видалити пункт, цифри автоматично зміняться.

ТегПризначення
<ol>Створює нумерований список
<li>Створює окремий пункт списку
<h2>Як створити сайт</h2>

<ol>
  <li>Створити HTML-файл</li>
  <li>Додати структуру сторінки</li>
  <li>Підключити CSS</li>
  <li>Перевірити результат у браузері</li>
</ol>

Упорядковані списки часто використовуються для інструкцій, рецептів, навчальних матеріалів та будь-яких даних, де важливий порядок.

❗ Важливо:

Не ставте цифри вручну перед текстом. Якщо використовувати ol та li, браузер автоматично підтримує правильну нумерацію.

📌 Завдання:
  1. Створіть список із п'яти кроків створення HTML-сторінки.
  2. Використайте тег ol для списку.
  3. Додайте кожен пункт через тег li.
  4. Додайте новий пункт у середину списку та перевірте нумерацію.
💡 Показати підказку

Для нумерованого списку використовуйте ol. Всередині нього кожен елемент повинен бути окремим li.

✅ Показати відповідь
Приклад:

<h2>Створення сайту</h2>

<ol>
  <li>Написати HTML-код</li>
  <li>Додати стилі CSS</li>
  <li>Перевірити сторінку</li>
  <li>Опублікувати сайт</li>
</ol>