Главная/ Cправочник HTML, CSS, Javascript/ HTML справочник : HTML теги, HTML атрибуты, мета теги, спецсимволы/ Tags/ HTML тег ul | назначение, синтаксис, атрибуты, примеры

Тег ul

Последнее обновление: 23.01.2011

Тег <ul> (англ. unordered — неупорядоченный) — тег-контейнер, создает маркированный список.
Блочный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис


<ul>
<li>...</li>
</ul>

Атрибуты



class определяет имя используемого класса
compact флаг. Выводит список с уменьшенными отступами.
Отсутствует в спецификации HTML 4.01!
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
id уникальный идентификатор
lang определяет используемый язык
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style задает встроенную таблицу стилей
title добавляет всплывающую подсказку
type определяет вид маркера

  • disc — маркер-диск (по умолчанию)
  • circle — маркер-круг
  • square — маркер-квадрат

Пример

Типы маркеров:


<ul>
<li type="disc">disc — маркер-диск (по умолчанию)</li>
<li type="circle">circle — маркер-круг</li>
<li type="square">square — маркер-квадрат</li>
</ul>

Рекомендации по использованию

  • закрывающий тег обязателен (</ul>)
  • может содержать только теги <li>
  • обязательных атрибутов нет
  • для задания вида списка рекомендуется использовать не атрибуты тега <ul>, а таблицы стилей
  • по умолчанию браузерами список выводится с отступами
  • списки можно вкладывать друг в друга, вложенные списки отображаются с увеличенным левым отступом
  • тег <ul> наиболее подходит для создания меню (меню можно трактовать как список ссылок)
  • элемент уровня блока, т.е. содержимое тега по умолчанию начинается с новой строки. После тега также добавляется перенос строки (если в свойствах блока не прописано другого)
Твой код:

Результат: