<ul> - HTML-елемент невпорядкованого списку

HTML-елемент <ul> (або невпорядкований список) представляє собою список елементів, порядок яких не має значення. Елементи списку зазвичай відображаються з маркерами, які можуть бути у вигляді крапки, кола або квадрата.

Елемент <ul> використовується для групування елементів, для яких порядок не є важливим. Наприклад, список покупок, перелік переваг або навігаційне меню. Кожен елемент списку створюється за допомогою тега <li>.

Ви можете змінювати стиль маркерів за допомогою CSS властивості list-style-type.

HTML
<ul>
  <li>Перший елемент</li>
  <li>Другий елемент</li>
  <li>Третій елемент</li>
</ul>

Атрибути

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

compact: Цей булевий атрибут вказував, що список має відображатися в компактному стилі. Цей атрибут є застарілим і не підтримується.
type: Визначає тип маркера для списку. Можливі значення: disc, circle, square. Цей атрибут є застарілим, використовуйте CSS властивість list-style-type.

Технічне резюме

Категорія контенту	Потоковий контент. Якщо його дочірні елементи включають один або більше елементів `<li>`, то також відчутний контент.
Дозволений вміст	Нуль або більше елементів `<li>`, `<script>`, `<template>`.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає потоковий контент.
Роль ARIA	`list`
DOM інтерфейс	`HTMLUListElement`

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

<ul>
  <li>Молоко</li>
  <li>Хліб</li>
  <li>Яйця</li>
</ul>

<ul>
  <li>Напої
    <ul>
      <li>Кава</li>
      <li>Чай</li>
    </ul>
  </li>
  <li>Їжа
    <ul>
      <li>Суп</li>
      <li>Салат</li>
    </ul>
  </li>
</ul>

Стилі за замовчуванням

CSS
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

Підтримка браузерів



`<ul>`
`compact`
`type`