HTML тег <ul>
Тег HTML <ul> определяет неупорядоченный список элементов. Узнайте про синтаксис, вложенность и стилизацию.
Тег HTML <ul> используется для создания неупорядоченного списка, объединяющего коллекцию элементов, не имеющих числового порядка. При изменении порядка элементов списка смысл не меняется. Как правило, элементы неупорядоченного списка отображаются с маркером. Маркер может быть разных форм: круг, точка или квадрат.
Каждый элемент неупорядоченного списка объявляется внутри тега <li>.
Тег <ul> является блочным элементом и занимает всё доступное горизонтальное пространство. Его высота зависит от содержимого контейнера. Неупорядоченный список обычно отображается как маркированный список.
Тег <ol> также представляет список элементов и создаёт упорядоченный список. Но он отличается от <ul> тем, что порядок в теге <ol> имеет значение. По умолчанию элементы упорядоченного списка отображаются с числами.
Теги <ul> и <ol> можно вкладывать на любую глубину. Вложенные списки могут чередоваться между <ul> и <ol>. Однако следует учитывать, что при вложении списка в другой список внутренний список должен быть помещён внутрь элемента <li> внешнего списка. Это означает, что прямым дочерним элементом списка должен быть <li>, но этот элемент <li> может содержать другой список. Маркер элемента списка можно изменить с помощью CSS. Однако семантический смысл, выражаемый выбором типа списка, нельзя изменить с помощью CSS.
Синтаксис
Тег <ul> используется парно. Содержимое записывается между открывающим (<ul>) и закрывающим (</ul>) тегами.
Пример HTML-тега <ul>:
Пример HTML-тега <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Вложенные списки
Списки часто вкладываются для выражения иерархии — например, меню с подпунктами. Чтобы вложить список, поместите внутренний <ul> внутрь элемента <li> внешнего списка, а не непосредственно в сам внешний <ul>. Прямым дочерним элементом <ul> всегда должен быть <li>.
Пример вложенного <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>
Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>Браузеры автоматически меняют маркер на каждом уровне вложенности (сначала диск, затем круг, затем квадрат), делая иерархию удобной для чтения.
Стилизация списка с помощью CSS
Исторические атрибуты type и compact устарели в HTML5 — не используйте их. Современный, семантически правильный способ изменить маркер — это свойство CSS list-style-type (или list-style-image для пользовательского изображения). Хранение маркера в CSS отделяет представление от структуры: список по-прежнему означает «неупорядоченный список» независимо от того, как вы его стилизуете.
Пример <ul> со свойством CSS list-style-type:
Пример HTML-тега <ul> со свойством CSS list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul.square {
list-style-type: square;
}
ul.circle {
list-style-type: circle;
}
ul.none {
list-style-type: none;
}
</style>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul class="square">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul class="circle">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul class="none">
<li>No marker</li>
<li>No marker</li>
</ul>
</body>
</html>Навигационные меню
Наиболее распространённое реальное применение <ul> — навигационное меню. Оборачивание списка в элемент <nav> помечает его как навигационный ориентир, а список по-прежнему сообщает вспомогательным технологиям о том, что «эти элементы образуют группу». Маркеры обычно убираются с помощью CSS.
Пример навигационного меню с <nav> и <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</body>
</html>Доступность
Программы чтения с экрана воспринимают <ul> как список: они объявляют о начале списка, сообщают количество элементов (например, «список, 3 элемента») и зачитывают каждый элемент по порядку. Это количество элементов является полезным контекстом для незрячих пользователей, поэтому предпочтительнее использовать настоящую разметку <ul>/<li>, а не стопку стилизованных элементов <div>.
Существует один важный нюанс. В Safari с VoiceOver применение list-style: none (как это обычно делается для навигационных меню) убирает семантику списка — VoiceOver больше не объявляет его как список. Если роль списка важна в данном контексте, восстановите её явно:
<ul role="list" style="list-style: none;">
<li>Home</li>
<li>About</li>
</ul>Атрибуты
Тег <ul> не имеет специфичных для элемента атрибутов в текущем стандарте HTML. (Старые атрибуты type и compact устарели — используйте CSS вместо них.) Поддерживаются только Глобальные атрибуты и Атрибуты событий.
Связанные теги и темы
<li>— определяет каждый элемент списка.<ol>— создаёт упорядоченный (нумерованный) список.- Списки HTML — обзор всех типов списков в HTML.
- CSS
list-style-type— управляет маркером списка.