<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
# the-ul-element

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ul
compact
Deprecated
type
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.

Смотрите также

  • Остальные списковые HTML-элементы: <ol>, <li>, <menu> и устаревший <dir>;

  • CSS-свойства, которые могут быть полезны для стилизации <ul> элементов:

    • свойство list-style, полезное для выбора способа отображения маркеров,
    • CSS счётчики, для более сложных вложенных списков,
    • свойство line-height, для замены убранного свойства compact,
    • свойство margin, для контроля отступа в списке.