Тег | HTML справочник
HTML тегиЗначение и применение
Маркированный (неупорядоченный) список в HTML определяется тегом <ul> (Unordered List Element). Каждый элемент списка должен начинаться с тега <li> (сокращенное от английского list item — элемент списка).
По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга.
Поддержка браузерами
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
compact | compact | Не поддерживается в HTML5. Указывает, что список должен быть меньше обычного размера (line-height: 80%). |
type | disc square circle | Не поддерживается в HTML5. Определяет вид маркера для использования в списке. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <ul></title> </head> <body> <ul> <li>Светлое</li> <li>Тёмное</li> <li>Пятница</li> </ul> </body> </html>
Выглядеть на странице это будет соответственно так:
- Светлое
- Тёмное
- Пятница
Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера. Возможные значения свойства:
Атрибут | Значение |
---|---|
list-style-type:none | Убирает маркер. |
list-style-type:disc | Маленький черный круг. Это значение по умолчанию. |
list-style-type:circle | Круг пустой внутри. |
list-style-type:square | Маркер в виде квадрата. |
Ниже приведен пример использования стилей CSS внутри маркированного списка:
<!DOCTYPE html> <html> <head> <title>Пример изменения типа маркера маркированного списка</title> </head> <body> <ul style = "list-style-type:none"> <!-- маркер отсутствует --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <ul style = "list-style-type:disc"> <!-- маленький черный круг --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <ul style = "list-style-type:circle"> <!-- круг пустой внутри --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <ul style = "list-style-type:square"> <!-- маркер в форме квадрата --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> </body> </html>
Результат нашего примера:
Маркированные списки.Отличия HTML 4.01 от HTML 5
В HTML5 удалены атрибуты compact и type.Значение CSS по умолчанию
ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; padding-left: 40px; }
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML теги| Справочник HTML
Элемент <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 список:
Спецификации
Поддержка браузерами
Элемент | ||||||
<ul> | 1+ | 1+ | 1+ | 1+ | 1+ | 1+ |
Элемент | ||||
<ul> | 1+ | 1+ | 6+ | 1+ |
Попробуйте сами — Примеры
Как сделать, чтобы список начинался с номера, отличного от 1:
Применение атрибутов type и start
Как изменить номер данного элемента списка:
Применение атрибута value
Как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами:
Применение свойства CSS list-style-type
Как создать вложенные списки:
Вложенные списки
Учебник HTML
HTML уроки: HTML Списки
HTML Элементы
Тег — неупорядоченный список
Поддержка браузерами
Описание
Маркированный (неупорядоченный) список представляет собой множество элементов, между которыми нет порядка следования. Самые распространенные неупорядоченные списки в интернете — списки гиперссылок на другие документы (например: меню, представляющее собой ненумерованный список HTML).
Для создания маркированного списка в HTML используется тег <ul>
(unordered list), который сообщает браузеру, что всё, следующее за ним, вплоть до закрывающего тега </ul>
, представляет собой маркированный список. Каждый элемент маркированного списка определяется тегом <li>. Кроме этого, в элементы списка можно вставить практически любое содержимое, включая другие списки, изображения, текст и т.д.
HTML тег <ul>
является блочным элементом, при отображении он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого. По умолчанию браузер предваряет каждый элемент списка специальным маркером и располагает каждый элемент с новой строки, применяя к нему небольшой отступ от левого края.
Примечание: для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения.
Для создания нумерованных (упорядоченных) списков используйте тег <ol>.
Атрибуты
Тег <ul>
поддерживает Глобальные атрибуты и События
Стиль по умолчанию
ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; }
Пример
<ul> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ul>
Результат данного примера в окне браузера:
| HTML | WebReference
Элемент <ul> (от англ. unordered list — неупорядоченный список) устанавливает маркированный список. Каждый пункт списка должен начинаться с элемента <li>.
Синтаксис
<ul>
<li>пункт маркированного списка</li>
</ul>
Закрывающий тег
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>UL</title>
</head>
<body>
<ul>
<li>Баал</li>
<li>Агарес</li>
<li>Марбас</li>
<li>Пруфлас</li>
<li>Аамон</li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид маркированного списка в браузере
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 10.10.2018
Редакторы: Влад Мержевич
Тег HTML маркированный список
Тег <ul> в HTML определяет маркированный список (неупорядоченный список).
Маркированный список широко используется к коде HTML страниц. Помимо прямого применения тега <ul> для структурирования данных в виде маркированных списков, связку <ul> — <li> часто используют для верстки меню сайта, как одноуровневого, так и многоуровневого.
Вид маркера, отображаемого возле пунктов списка <ul> можно задать с помощью CSS свойств.
Элемент списка определяется тегом <li> и должен находиться внутри тега <ul>.
Чтобы создать многоуровневый список, необходимо поместить код вложенного списка в элемент <li>, для которого нужно создать подуровень.
Помимо маркированного списка в HTML можно создать нумерованный список. Для этого следует использовать тег <ol>.
Тип маркера, его положение можно изменить при помощи CSS свойств. Подробнее на странице: Создание списков. Все о HTML списках.
Синтаксис
<ul>элементы_списка_li</ul>
Отображение в браузере
- Меркурий
- Венера
- Земля
- Марс
- Юпитер
- Сатурн
- Уран
- Нептун
Пример использования <ul> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Маркированный список ul в HTML</title>
</head>
<body>
<ul>
<li>Меркурий</li>
<li>Венера</li>
<li>Земля</li>
<li>Марс</li>
<li>Юпитер</li>
<li>Сатурн</li>
<li>Уран</li>
<li>Нептун</li>
</ul>
</body>
</html>
Поддержка браузерами
Атрибуты тега <ul>
В HTML5 тег <ul> не имеет атрибутов. При необходимости используйте CSS. Тег <ul> также поддерживает глобальные HTML атрибуты.
Устаревшие атрибуты
Атрибут | Значение | Описание |
---|---|---|
compact |
compact |
Логический атрибут. Указывает, что список должен быть выведен меньшим размером шрифта. |
type |
disc |
Определяет тип маркера пунктов списка. |
Атрибут type | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает вид маркера.
Синтаксис
<ul type="disc | circle | square">...</ul>
Значения
Для маркированного списка маркеры могут принимать один из трех видов: кружок (disc), окружность (circle) и квадрат (square). Значения атрибута type и получаемый вид показан в табл. 1.
Код | Пример |
---|---|
<ul type=»disc»> … </ul> |
|
<ul type=»circle»> … </ul> |
|
<ul type=»square»> … </ul> |
|
Значение по умолчанию
disc
Аналог CSS
list-style-type
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег UL, атрибут type</title>
</head>
<body>
<ul type="circle">
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Маркеры в виде окружности
Тег HTML элемент списка
Тег <li> в HTML определяет элемент (пункт) списка.
Тег <li> должен быть дочерним тегом нумерованного списка <ol> или маркированного списка <ul>.
При помощи CSS свойств для конкретного пункта списка можно изменять параметры: тип маркера, его положение (для маркированного списка), тип нумерации (для нумерованного списка). Подробнее на странице: Создание списков. Все о HTML списках.
Синтаксис
<li>контент элемента</li>
Отображение в браузере
Тег li в маркированном списке:
Основные характеристики 3D принтера:
- Область печати
- Точность позиционирования по осям X, Y, Z
- Диаметр сопла
- Диаметр нити
- Высота слоя
- Скорость печати
Тег li в нумерованном списке:
Документы для подачи заявки на визу:
- Действительный заграничный паспорт
- Визовая анкета
- Одна фотография длиной и шириной 5 см
- Письмо-подтверждение назначенного собеседования
Пример использования <li> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Элемент li в маркированном HTML списке</title>
</head>
<body>
<ul>
<li>Область печати</li>
<li>Точность позиционирования по осям X, Y, Z</li>
<li>Диаметр сопла</li>
<li>Высота слоя</li>
<li>Скорость печати</li>
</ul>
</body>
</html>
Поддержка браузерами
Атрибуты тега <li>
Атрибут | Значение | Описание |
---|---|---|
value | число |
Устанавливает значение нумерации для текущего пункта. Последующие пункты <li> будут иметь номера идущие за указанным. |
Тег <li> также поддерживает глобальные HTML атрибуты.
Устаревшие атрибуты
Атрибут | Значение | Описание |
---|---|---|
type | 1 A a I i disc square circle |
Тип оформления списка: 1 — арабские цифры (1, 2, 3, 4, 5…). |