<ul> - элемент «Неупорядоченный список»
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML-элемент <ul>
используется для неупорядоченного списка, в частности для маркированного списка.
Интерактивный пример
Категории контента | Основной поток, и если дочерний элемент <ol> включает в себя хотя бы один элемент <li> , явный контент. |
---|---|
Допустимое содержимое | Ноль или больше <li> элементов, содержат вложенные элементы <ol> или <ul> . |
Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
Допустимые родители | Любой элемент, который принимает основной поток. |
Допустимые ARIA-роли | directory , group , listbox , menu , menubar , radiogroup , tablist , toolbar , tree , presentation |
DOM-интерфейс | HTMLUListElement |
Свойства
Этот элемент включает глобальные атрибуты.
compact
Устарело-
Атрибут логического значения (bool) говорит о том, что список будет представлен в более компактном стиле. Интерпретация этого атрибута зависит от user agent и не работает со всеми браузерами.
Предупреждение: Не используйте этот атрибут, ибо он устаревший и больше не используется, используйте CSS. Для схожего эффекта с
compact
, подойдёт свойство CSSline-height
с значением80%
. type
Устарело-
Этот атрибут добавляет маркеры (bullets) в список. Значения установлены под HTML3.2 и переходными на HTML 4.0/4.01 являются:
circle
disc
square
Четвёртый маркер задан в интерфейсе WebTV, но не все браузеры смогут его отобразить:triangle
.Если данный атрибут отсутствует и если атрибут CSSlist-style-type
не присвоен к данному элементу, пользовательский агент (user agent) выберет маркер в зависимости от вложенного уровня в списке.Предупреждение: Не используйте этот атрибут, ибо он устаревший; используйте свойство CSS
list-style-type
.
Примечания по использованию
- Элемент
<ul>
используется для группировки непронумерованных элементов данных, и их последовательность в списке не нужна. Что характерно, непорядочные списки используют маркеры, которые могут быть разных форм (в форме точки, круга или прямоугольной формы). Стиль задаётся не в HTML, а со связанным с ним CSS, используя свойствоlist-style-type
. - Элементы
<ul>
и<ol>
могут быть вложены на любом уровне. Более того, вложенные списки могут чередоваться между<ol>
и<ul>
без ограничений. - Элементы
<ol>
и<ul>
используются для списков. Различие лишь в том, что в элементе<ol>
порядок имеет значение. Согласно эмпирической закономерности (или правилу большого пальца), чтобы определить, какую маркировку использовать, попробуйте поменять порядок элементов в списке. Если суть списка меняется, то тогда подойдёт элемент<ol>
, в противном случае используйте<ul>
.
Примеры
Простой список
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
Результат HTML кода выше:
Вложенный список
<ul>
<li>first item</li>
<li>
second item
<!-- Закрывающий тег </li> пишем не здесь! -->
<ul>
<li>second item first subitem</li>
<li>
second item second subitem
<!-- То же самое для второго вложенного неупорядоченного списка! -->
<ul>
<li>second item second subitem first sub-subitem</li>
<li>second item second subitem second sub-subitem</li>
<li>second item second subitem third sub-subitem</li>
</ul>
</li>
<!-- Закрывающий тег </li>, который
закрывает третий неупорядоченный список -->
<li>second item third subitem</li>
</ul>
<!-- Вот закрывающий тег </li> -->
</li>
<li>third item</li>
</ul>
Результат HTML кода выше:
Упорядоченный список внутри неупорядоченного списка
<ul>
<li>first item</li>
<li>
second item
<!-- Закрывающий тег </li> пишем не здесь! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
<!-- Вот закрывающий тег </li> -->
</li>
<li>third item</li>
</ul>
Результат HTML кода выше:
Спецификации
Specification |
---|
HTML Standard # the-ul-element |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
-
Остальные списковые HTML-элементы:
<ol>
,<li>
,<menu>
и устаревший<dir>
; -
CSS-свойства, которые могут быть полезны для стилизации
<ul>
элементов:- свойство list-style, полезное для выбора способа отображения маркеров,
- CSS счётчики, для более сложных вложенных списков,
- свойство line-height, для замены убранного свойства
compact
, - свойство margin, для контроля отступа в списке.