<ul> элемент HTML для ненумерованного списка

Элемент <ul> HTML представляет собой ненумерованный список элементов, который обычно отображается в виде маркированного списка.

Попробуйте

<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

Этот логический атрибут указывает, что список следует отображать в компактном виде. Интерпретация этого атрибута зависит от браузера. Вместо него используйте CSS: чтобы добиться эффекта, аналогичного атрибуту compact, можно задать свойству CSS line-height значение 80%.

type

Этот атрибут задаёт стиль маркеров списка. В HTML 3.2 и переходной версии HTML 4.0/4.01 определены следующие значения:

• circle
• disc
• square

В интерфейсе WebTV был определён четвёртый тип маркера, но не все браузеры его поддерживают: triangle.

Если этот атрибут не указан и к элементу не применяется свойство list-style-type из CSS, пользовательский агент выбирает тип маркера в зависимости от уровня вложенности списка.

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

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

• Элемент <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>

Результат

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

<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- Same for the second nested unordered list! -->
        <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>
      <!-- Closing </li> tag for the li that
                  contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

Результат

Нумерованный список внутри ненумерованного

<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

Результат

Техническая сводка

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

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

См. также

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