🔁 Пригадаймо: що ми вже знаємо

На попередніх уроках ми навчилися створювати HTML-документ і наповнювати його вмістом. Ми вже вміємо:

• створювати структуру документа — <!DOCTYPE>, <html>, <head>, <body>;
• робити заголовки шести рівнів — <h1>–<h6>;
• створювати абзаци — <p>;
• форматувати текст — <strong>, <em>, <u>, <br>, <hr>;
• додавати посилання — <a> з атрибутом href;
• і розуміємо, що таке тег, елемент та атрибут.

Сьогодні ми додамо до цього ще один інструмент — списки. Вони дозволяють подати інформацію у структурованому вигляді: як перелік пунктів. Це зручно, коли треба перелічити щось — правила, кроки, пункти, приклади.

У HTML є два основні види списків:

• Ненумеровані — коли порядок пунктів неважливий. Наприклад, перелік покупок у магазині: «молоко, хліб, яблука». Браузер показує такі пункти з маркерами (крапками).
• Нумеровані — коли порядок важливий. Наприклад, кроки рецепту або інструкції: «1, 2, 3». Браузер сам ставить номери.

Окрім цього, списки можна вкладати один в один — коли один перелік містить підпункти. Наприклад: «Фрукти → яблуко, банан; Овочі → помідор, огірок».

Сьогодні ми навчимося створювати всі ці види списків і розберемо їхні атрибути.

📌 Ненумеровані списки <ul>

Почнімо з найпростішого — ненумерованого списку.

Походження назви:

• <ul> — скорочення від англійського Unordered List — «невпорядкований список»;
• <li> — скорочення від англійського List Item — «елемент списку».

Запам’ятати легко: U — Unordered (не впорядкований), L — List (список). Тому тег і називається саме <ul>.

Як це працює

Коли ми створюємо список, ми маємо дві різні задачі, і для кожної з них є свій тег:

1. Сказати браузеру, що тут буде список. Для цього ми використовуємо тег <ul> — він ніби каже: «увага, зараз починається ненумерований список».
2. Перелічити пункти всередині цього списку. Для цього кожен пункт обгортається тегом <li> — він каже: «а ось це — один із пунктів списку».

Тобто <ul> — це контейнер, який тримає в собі всі пункти, а <li> — це окремий пункт усередині цього контейнера.

Відкриваючі та закриваючі теги: де саме їх ставити

Кожен тег у списку має дві частини: відкриваючу та закриваючу.

• Відкриваючий тег ставиться перед вмістом. Він каже браузеру: «тут починається елемент».
• Закриваючий тег ставиться після вмісту. Він каже: «тут елемент закінчується».

Подивіться уважно на код — тут показано, де саме стоїть кожен тег:

<ul>
  <li>Яблуко</li>
  <li>Банан</li>
  <li>Апельсин</li>
</ul>

Розберімо рядок за рядком:

• <ul> — відкриваючий тег списку. Стоїть перед першим пунктом. Він каже: «починається список».
• <li>Яблуко</li> — спочатку відкриваючий <li> (перед словом «Яблуко»), потім саме слово, потім закриваючий </li> (після слова «Яблуко»). Він каже: «пункт „Яблуко“ закінчився».
• <li>Банан</li> — те саме: <li> перед словом, </li> після слова.
• <li>Апельсин</li> — те саме.
• </ul> — закриваючий тег списку. Стоїть після останнього пункту. Він каже: «список закінчився».

Що буде, якщо забути закрити тег

❌ Неправильно:

<ul>
  <li>Яблуко
  <li>Банан
  <li>Апельсин

Тут не закрито жоден <li> і сам <ul>. Браузер не знає, де закінчується кожен пункт. Результат може бути непередбачуваним: пункти злипаються, а наступний текст на сторінці теж потрапляє до списку.

✅ Правильно:

<ul>
  <li>Яблуко</li>
  <li>Банан</li>
  <li>Апельсин</li>
</ul>

Кожен тег закрито — браузер точно знає, де закінчується кожен пункт і сам список.

Приклад

<ul>
  <li>Яблуко</li>
  <li>Банан</li>
  <li>Апельсин</li>
</ul>

✅ Результат:

Коли використовувати

Ненумерований список використовують, коли:

• порядок пунктів неважливий (перелік покупок, інгредієнтів);
• треба просто перелічити щось (хобі, улюблені фільми, риси характеру);
• у списку немає логічної послідовності.

📌 Нумеровані списки <ol>

Тепер розберемо другий вид списку — нумерований.

Походження назви:

• <ol> — скорочення від англійського Ordered List — «впорядкований список»;
• <li> — те саме, що й у ненумерованому списку, List Item — «елемент списку».

Запам’ятати легко: O — Ordered (впорядкований), L — List (список). Тому тег і називається саме <ol>.

Як це працює

Будова нумерованого списку така сама, як і в ненумерованого. Різниця лише в тегу-контейнері:

• <ol> — контейнер, який каже браузеру: «тут починається нумерований список».
• <li> — окремий пункт усередині цього списку.

Кожен пункт, як і раніше, обгортається в <li>...</li>. А от нумерацію браузер додає автоматично — ми її не пишемо.

Будова списку

Ось як виглядає повний код нумерованого списку:

<ol>
  <li>Прокинутися</li>
  <li>Поснідати</li>
  <li>Піти до школи</li>
</ol>

Розберімо рядок за рядком:

• <ol> — відкриваючий тег списку. Стоїть перед першим пунктом. Каже: «починається нумерований список».
• <li>Прокинутися</li> — перший пункт. Браузер покаже його з номером 1.
• <li>Поснідати</li> — другий пункт. Браузер покаже його з номером 2.
• <li>Піти до школи</li> — третій пункт. Браузер покаже його з номером 3.
• </ol> — закриваючий тег списку. Стоїть після останнього пункту. Каже: «список закінчився».

Приклад

<ol>
  <li>Прокинутися</li>
  <li>Поснідати</li>
  <li>Піти до школи</li>
</ol>

✅ Результат:

Коли використовувати

Нумерований список використовують, коли:

• порядок пунктів важливий — кроки, інструкції, рецепти;
• треба показати послідовність дій;
• треба скласти рейтинг або список «топ-5».

Різниця між <ul> і <ol>

Запам’ятайте просте правило:

• <ul> — коли порядок не важливий. Наприклад, «купівлі в магазині»: молоко, хліб, яблука. Не має значення, у якому порядку вони йдуть.
• <ol> — коли порядок важливий. Наприклад, «кроки рецепту»: спочатку збити яйця, потім додати борошно, потім пекти. Якщо змінити порядок — рецепт не спрацює.

Саме тому вибір тега залежить не від того, як список виглядає, а від того, чи важлива послідовність.

⭐ Вкладені списки

Ми вже вміємо створювати прості списки: ненумеровані та нумеровані. Але іноді треба показати ієрархію — коли один перелік містить підпункти. Наприклад:

• Фрукти
  • Яблуко
  • Банан

Це і є вкладений список — список, який знаходиться всередині іншого списку.

Як це працює

Ідея проста: один пункт списку може містити в собі новий список. Тобто всередині тега <li> ми можемо розмістити ще один <ul> або <ol>.

Ключове правило: вкладений список завжди ставиться всередину <li>, а не після нього.

Будова вкладеного списку

Ось як виглядає код із двома рівнями:

<ul>
  <li>Фрукти
    <ul>
      <li>Яблуко</li>
      <li>Банан</li>
    </ul>
  </li>
</ul>

Давайте розберемо його крок за кроком, ніби ми самі — це браузер, який читає код згори вниз.

Крок 1. Бачимо <ul> — «Ага, тут починається список. Запам’ятаю».

Крок 2. Бачимо <li>Фрукти — «Почався пункт списку, у ньому буде слово „Фрукти“. Але я поки не бачу закриваючого </li>. Значить, цей пункт ще не закінчився — всередині нього буде щось іще.»

Крок 3. Бачимо <ul> — «О, усередині пункту „Фрукти“ починається ще один список. Запам’ятаю: це вкладений список».

Крок 4. Бачимо <li>Яблуко</li> — «Перший пункт вкладеного списку. Він закритий — усередині нього більше нічого немає».

Крок 5. Бачимо <li>Банан</li> — «Другий пункт вкладеного списку. Теж закритий».

Крок 6. Бачимо </ul> — «Вкладений список закінчився. Підпункти більше не додаються».

Крок 7. Бачимо </li> — «А ось тепер закінчився і сам пункт „Фрукти“. Усе, що було всередині нього — і слово „Фрукти“, і вкладений список із яблуком і бананом — усе це належить цьому пункту».

Крок 8. Бачимо </ul> — «Головний список закінчився».

Що тут найважливіше

Пункт <li>Фрукти не закривається одразу — бо ми хочемо, щоб усередині нього з’явився ще один список. Тому закриваючий </li> ставиться після вкладеного списку, а не перед ним.

Простими словами:

Саме тому в коді </li> стоїть після </ul> — це не помилка, це логіка вкладеності.

Типова помилка

❌ Неправильно:

<ul>
  <li>Фрукти</li>
  <ul>
    <li>Яблуко</li>
  </ul>
</ul>

Тут <li>Фрукти</li> закрито одразу, і вкладений список стоїть після пункту, а не всередині. Браузер може показати це неправильно — підпункти можуть вирівнятися не під «Фрукти», а окремо.

✅ Правильно:

<ul>
  <li>Фрукти
    <ul>
      <li>Яблуко</li>
    </ul>
  </li>
</ul>

Вкладений список стоїть всередині <li> — до його закриваючого тега.

Скільки рівнів можна вкладати

Технічно — скільки завгодно. Але на практиці достатньо двох або трьох рівнів. Якщо вкладень більше — читачеві стає важко сприймати структуру.

Приклад 1. Нумерований список із ненумерованими вкладеними

<ol>
  <li>Фрукти
    <ul>
      <li>Яблуко</li>
      <li>Банан</li>
    </ul>
  </li>
  <li>Овочі
    <ul>
      <li>Помідор</li>
      <li>Огірок</li>
    </ul>
  </li>
</ol>

✅ Результат:

Головний список — нумерований (<ol>), тому браузер показує категорії з номерами 1, 2: «Фрукти», «Овочі». А кожна категорія містить вкладений ненумерований список (<ul>) — конкретні елементи з маркерами-крапками.

Приклад 2. Ненумерований список із нумерованими вкладеними

<ul>
  <li>Кроки приготування чаю
    <ol>
      <li>Закип'ятити воду</li>
      <li>Засипати чай у чашку</li>
      <li>Залити окропом</li>
      <li>Дати настоятися 3 хвилини</li>
    </ol>
  </li>
  <li>Кроки приготування кави
    <ol>
      <li>Змолоти зерна</li>
      <li>Засипати в турку</li>
      <li>Залити водою і поставити на вогонь</li>
    </ol>
  </li>
</ul>

✅ Результат:

Тут навпаки: головний список ненумерований (<ul>) — категорії йдуть із крапками. А всередині кожної категорії — нумерований список (<ol>) із кроками, бо порядок кроків важливий.

Кількість пунктів і рівнів вкладеності — довільна. Можна зробити список із двох пунктів, а можна з двадцяти. Головне — дотримуватися правил вкладеності, які ми розібрали вище.

📌 Атрибути списків

Ми вже вміємо створювати списки — ненумеровані, нумеровані та вкладені. Але іноді потрібно змінити вигляд або спосіб нумерації: наприклад, використати римські цифри, почати нумерацію з 5 або змінити маркер.

Для цього в HTML існують спеціальні атрибути списків.

Атрибут type для нумерованих списків <ol>

Атрибут type визначає вид нумерації — якими символами позначатимуться пункти.

Приклад коду:

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

Атрибут start для нумерованих списків <ol>

Атрибут start дозволяє почати нумерацію не з 1, а з іншого числа(наприклад в прикладі з 5).

Приклад коду:

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

Атрибут reversed для нумерованих списків <ol>

Атрибут reversed задає зворотний напрямок нумерації — браузер нумерує пункти у зворотному порядку.

Приклад коду:

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

Атрибут type для ненумерованих списків <ul>

У ненумерованих списків теж можна використовувати атрибут type. Він дозволяє змінити вид маркера.

Приклад коду:

<ul type="square">
  <li>Яблуко</li>
  <li>Банан</li>
  <li>Апельсин</li>
</ul>

Приклад

(атрибути можна використовувати декілька одразу)

Код:

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

Що запам’ятати

• Атрибути списків дозволяють змінювати вигляд або нумерацію списку.
• Для <ol> можна використовувати type, start і reversed.
  • type визначає вид нумерації.
  • start визначає, з якого числа починається нумерація.
  • reversed змінює напрямок нумерації.
• Для <ul> атрибут type дозволяє змінювати вид маркера.
• Атрибути, які ми розглянули, працюють у браузерах. У сучасній веброзробці зовнішній вигляд елементів часто налаштовують за допомогою CSS, з яким ми познайомимося пізніше.

📋 Шпаргалка: теги та атрибути списків

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

Теги списків

Атрибути нумерованих списків <ol>

Значення атрибута type для <ol>:

Атрибути ненумерованих списків <ul>

Значення атрибута type для <ul>:

Коротко про головне

• <ul> — список, де порядок неважливий(маркери).
• <ol> — список, де порядок важливий(нумерація).
• <li> — окремий пункт будь-якого списку.
• Списки можна вкладати один в один — тоді вкладений список ставиться всередину <li>.
• Атрибути змінюють вигляд або нумерацію списку.
• У сучасній веброзробці вигляд списків часто налаштовують через CSS.

✅ Підсумок

На цьому уроці ми навчилися створювати списки — один із найзручніших інструментів для структурування інформації на веб-сторінці.

Головні висновки:

• Існує два основні види списків:
  • ненумерований <ul> — коли порядок пунктів неважливий;
  • нумерований <ol> — коли порядок важливий.
• Кожен пункт списку обгортається тегом <li> — незалежно від того, який це список.
• Списки можна вкладати один в один. Вкладений список завжди ставиться всередину <li>, а не після нього.
• У кожного відкриваючого тега має бути свій закриваючий. Це правило стосується і <ul>, і <ol>, і <li>.
• Для списків існують атрибути, які змінюють вигляд або нумерацію:
  • у <ol> — type, start, reversed;
  • у <ul> — type.
• Атрибути списків працюють у браузерах. Але в сучасній веброзробці зовнішній вигляд часто налаштовують через CSS.