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

Елемент HTML <ul> позначає невпорядкований перелік елементів, який зазвичай зображується як список з маркерами.

Спробуйте його в дії

Атрибути

Цей елемент приймає глобальні атрибути.

compact

Цей булів атрибут вказує на те, що перелік повинний бути виведений у компактному стилі. Інтерпретація цього атрибута залежить від користувацького агента, і працює не у всіх браузерах.

Застереження: Не слід вживати цей атрибут, бо він є нерекомендованим – замість нього слід використовувати засоби CSS. Для досягнення ефекту, подібного до атрибута compact, можна використати властивість CSS line-height зі значенням 80%.

type

Цей атрибут задає маркери, які будуть використані у переліку. Значення, визначені в HTML3.2, і перехідній версії HTML 4.0/4.01:

• circle
• disc
• square

Четверте значення було визначено інтерфейсом WebTV, але не всі браузери його підтримують: triangle.

Якщо атрибут type не вказано, і до елемента не застосована властивість CSS list-style-type, то браузер обере тип маркера залежно від глибини вкладеності переліку.

Застереження: Не слід використовувати цей атрибут, бо він є нерекомендованим, – замість нього застосовуйте властивість CSS list-style-type.

Примітки щодо застосування

• Елемент <ul> призначений для групування колекції елементів без числового впорядкування, тобто коли їхній порядок в переліку не має ніякого значення. Зазвичай невпорядковані переліки виводяться з маркерами, котрі можуть приймати декілька форм, як то крапки, кола чи квадрата. Стиль маркерів не описується в HTML сторінки, але може бути заданий у CSS, за допомогою властивості list-style-type.
• Елементи <ul> і <ol> можна вкладати одне в одного як завгодно глибоко. На кожному рівні можна використати як впорядкований, так і невпорядкований перелік.
• І елементи <ul>, і елементи <ol> позначають перелік з елементів. Різниця полягає в тому, що в <ol> порядок елементів має значення. Щоб визначити, який елемент вжити, спробуйте змінити порядок елементів: якщо зміст змінився — слід використати <ol>, а інакше – можна обмежитись <ul>.

Приклади

Простий приклад

<ul>
  <li>перший елемент</li>
  <li>другий елемент</li>
  <li>третій елемент</li>
</ul>

Результат

Вкладені переліки

<ul>
  <li>перший елемент</li>
  <li>
    другий елемент
    <!-- Гляньте, тут немає кінцевого тегу </li>! -->
    <ul>
      <li>другий елемент, перший піделемент</li>
      <li>
        другий елемент, другий піделемент
        <!-- Так само з другим вкладеним невпорядкованим списком! -->
        <ul>
          <li>другий елемент, другий піделемент, перший підпіделемент</li>
          <li>другий елемент, другий піделемент, другий підпіделемент</li>
          <li>другий елемент, другий піделемент, третій підпіделемент</li>
        </ul>
      </li>
      <!-- Кінцевий тег </li> для тега <li>,
                  що містить третій невпорядкований список -->
      <li>другий елемент, третій піделемент</li>
    </ul>
    <!-- А тут — кінцевий тег </li> -->
  </li>
  <li>третій елемент</li>
</ul>

Результат

Впорядкований перелік, що містить невпорядкований перелік

<ul>
  <li>перший елемент</li>
  <li>
    другий елемент
    <!-- Гляньте, тут немає кінцевого тегу </li>! -->
    <ol>
      <li>другий елемент, перший піделемент</li>
      <li>другий елемент, другий піделемент</li>
      <li>другий елемент, третій піделемент</li>
    </ol>
    <!-- А ось де кінцевий тег </li> -->
  </li>
  <li>третій елемент</li>
</ul>

Результат

Технічний підсумок

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

Сумісність з браузерами

Дивіться також

• Інші HTML-елементи, що мають стосунок до переліків: <ol>, <li>, <menu>

• Властивості CSS, які можуть бути корисними для оформлення елемента <ul>:

  • властивість list-style – для вибору типу маркера.
  • Лічильники CSS – для обробки складних вкладених переліків.
  • властивість line-height – для імітації нерекомендованого атрибута compact.
  • властивість margin – для керування відступами в списку.