Элемент | ||||||
<ul> | 1+ | 1+ | 1+ | 1+ | 1+ | 1+ |
HTML тег <ul>
Элемент <ul> (от англ. "unordered list" ‒ «неупорядоченный список») создаёт маркированный (неупорядоченный) список. Как правило, элемент <ul> применяется для создания таких списков, где изменение порядка следования пунктов этого списка существенно не меняет смысл списка.
Тег <ul> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.
Пункты для нумерованных списков определяются с помощью тега <li>, который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.
Примечание: Если к <ul> применяется CSS свойство, то элементы <li> наследуют эти свойства.
Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Для создания нумерованных списков используйте тег <ol>.
Синтаксис
<ul>
...
<li> ... </li>
...
</ul>
Закрывающий тег
Обязателен.
Атрибуты
- compactУстарел в HTML5
- Сокращает отступы и расстояния между строками.
- typeHTML5
- Устанавливает вид маркера списка.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <ul> со следующими значениями CSS по умолчанию:
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Различия между HTML 4.01 и HTML5
Атрибуты compact и type не поддерживаются в HTML5.
Пример использования:
Неупорядоченный HTML список:
Спецификации
Спецификация | Статус |
---|---|
WHATWG HTML Living Standard (WHATWG) | Живой стандарт |
HTML 4.01 (W3C) | Рекомендация |
HTML5 (W3C) | Рекомендация |
HTML 5.1 (W3C) | Рекомендация |
Поддержка браузерами
Попробуйте сами - Примеры
Как сделать, чтобы список начинался с номера, отличного от 1:
Применение атрибутов type и start
Как изменить номер данного элемента списка:
Применение атрибута value
Как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами:
Применение свойства CSS list-style-type
Как создать вложенные списки:
Вложенные списки
Учебник HTML
HTML уроки: HTML Списки