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

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

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

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

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

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

Теги ul та li

Тег ul створює сам список, а кожен окремий пункт списку розміщується всередині тега li. Один тег li відповідає одному пункту списку.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>React</li>
</ul>

За замовчуванням браузер показує біля кожного пункту списку закрашений кружок — маркер списку.

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

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

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

❗ Важливо:

Не створюйте списки вручну через символи -, *, або крапки. Для списків у HTML існують спеціальні теги ul та li, які правильно описують структуру документа.

📌 Завдання:
  1. Створіть неупорядкований список із п'яти пунктів.
  2. Додайте до списку назви ваших улюблених технологій.
  3. Створіть заголовок h2 перед списком.
  4. Перевірте результат у браузері.
💡 Показати підказку

Пам'ятайте: ul створює список, а кожен пункт списку повинен бути всередині окремого li.

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

<h2>Технології</h2>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>React</li>
  <li>Next.js</li>
</ul>