<ul> - элемент «Неупорядоченный список»

Интерактивный пример

<ul>
  <li>Milk</li>
  <li>
    Cheese
    <ul>
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>

li {
  list-style-type: circle;
}

li li {
  list-style-type: square;
}

Свойства

Этот элемент включает глобальные атрибуты.

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>.

Примеры

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

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

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

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

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

• Остальные списковые HTML-элементы: <ol>, <li>, <menu> и устаревший <dir>;
• CSS-свойства, которые могут быть полезны для стилизации <ul> элементов:
  • свойство list-style, полезное для выбора способа отображения маркеров,
  • CSS счётчики, для более сложных вложенных списков,
  • свойство line-height, для замены убранного свойства compact,
  • свойство margin, для контроля отступа в списке.