<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, подойдёт свойство CSS line-height с значением 80%.

type Устарело

Этот атрибут добавляет маркеры (bullets) в список. Значения установлены под HTML3.2 и переходными на HTML 4.0/4.01 являются:

  • circle
  • disc
  • square Четвёртый маркер задан в интерфейсе WebTV, но не все браузеры смогут его отобразить: triangle.Если данный атрибут отсутствует и если атрибут CSS list-style-type не присвоен к данному элементу, пользовательский агент (user agent) выберет маркер в зависимости от вложенного уровня в списке.

    Предупреждение: Не используйте этот атрибут, ибо он устаревший; используйте свойство CSS list-style-type.

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

  • Элемент <ul> используется для группировки непронумерованных элементов данных, и их последовательность в списке не нужна. Что характерно, непорядочные списки используют маркеры, которые могут быть разных форм (в форме точки, круга или прямоугольной формы). Стиль задаётся не в HTML, а со связанным с ним CSS, используя свойство list-style-type.
  • Элементы <ul> и <ol> могут быть вложены на любом уровне. Более того, вложенные списки могут чередоваться между <ol> и <ul> без ограничений.
  • Элементы <ol> и <ul> используются для списков. Различие лишь в том, что в элементе <ol> порядок имеет значение. Согласно эмпирической закономерности (или правилу большого пальца), чтобы определить, какую маркировку использовать, попробуйте поменять порядок элементов в списке. Если суть списка меняется, то тогда подойдёт элемент <ol>, в противном случае используйте <ul>.

Примеры

Простой список

html
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

Результат HTML кода выше:

Вложенный список

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 кода выше:

Упорядоченный список внутри неупорядоченного списка

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, для контроля отступа в списке.