HTML тег `<ul>`

Значение и применение

Маркированный (неупорядоченный) список в HTML определяется тегом <ul> (Unordered List Element). Каждый элемент списка должен начинаться с тега <li> (сокращенное от английского list item - элемент списка).

По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга.

Выбирайте <ol>, если порядок пунктов меняет смысл (шаги инструкции), и <ul>, если это обычное перечисление. Вложенный список размещайте внутри соответствующего <li>, а не между пунктами. Непосредственное содержимое списков — элементы <li>; стандарт также допускает служебные <script> и <template>.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.ul
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`ul`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2
`compact`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`type`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`compact`	`compact`	Не поддерживается в HTML5. Указывает, что список должен быть меньше обычного размера (`line-height`: `80%`).
`type`	`disc square circle`	Не поддерживается в HTML5. Определяет вид маркера для использования в списке.

Примеры, попробуйте сами

Маркированный список

Добавьте ещё один li внутрь ul.

index.html

HTML

<ul>
  <li>Подготовить разметку</li>
  <li>Добавить стили</li>
  <li>Проверить результат</li>
</ul>

Вложенные маркированные и нумерованные списки

Вложенный ul или ol находится внутри родительского li, после названия группы. Добавьте игрушку в группу «Для дома»: она станет пунктом третьего уровня. Закрывающий тег родительского li должен стоять после вложенного списка.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Вложенные списки</title>
  </head>
  <body>
    <ul>
      <li>Игрушки
        <ul>
          <li>Для дома
            <ul>
              <li>Резиновая косточка</li>
              <li>Пищащий ёжик</li>
            </ul>
          </li>
          <li>Для прогулки
            <ul>
              <li>Канат с мячиком</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Лакомства</li>
    </ul>
    <ol>
      <li>Позвать Тони
        <ol>
          <li>Показать канат</li>
          <li>Сказать «Ко мне!»</li>
        </ol>
      </li>
      <li>Бросить канат</li>
    </ol>
  </body>
</html>

Отличия HTML 4.01 от HTML 5

В HTML5 удалены атрибуты compact и type.

Значение CSS по умолчанию

CSS

ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
padding-left: 40px;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <ul>