HTML тег <ul>

Элемент <ul> (от англ. "unordered list" ‒ «неупорядоченный список») создаёт маркированный (неупорядоченный) список. Как правило, элемент <ul> применяется для создания таких списков, где изменение порядка следования пунктов этого списка существенно не меняет смысл списка.

Тег <ul> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.

Пункты для нумерованных списков определяются с помощью тега <li>, который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

Примечание: Если к <ul> применяется CSS свойство, то элементы <li> наследуют эти свойства.

Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Для создания нумерованных списков используйте тег <ol>.

Синтаксис

<ul>
  ...
  <li> ... </li>
  ...
</ul>

Закрывающий тег

Обязателен.

Атрибуты

compactУстарел в HTML5
Сокращает отступы и расстояния между строками.

typeHTML5
Устанавливает вид маркера списка.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <ul> со следующими значениями CSS по умолчанию:

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

Различия между HTML 4.01 и HTML5

Атрибуты compact и type не поддерживаются в HTML5.

Пример использования:

Неупорядоченный HTML список:

Пример HTML:

Попробуй сам
<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Какао</li>
</ul>

Спецификации

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML 4.01 (W3C) Рекомендация
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

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

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

Как сделать, чтобы список начинался с номера, отличного от 1:
Применение атрибутов type и start

Как изменить номер данного элемента списка:
Применение атрибута value

Как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами:
Применение свойства CSS list-style-type

Как создать вложенные списки:
Вложенные списки

Учебник HTML

HTML уроки: HTML Списки

HTML Элементы



Contema