<ul>
- 25 января 2023
Тег <ul>
используется для создания неупорядоченного списка элементов.
Синтаксис тега <ul>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <ul>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Простой неупорядоченный список:
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
Неупорядоченный список с вложенным списком:
<ul>
<li>Пункт 1</li>
<li>Пункт 2
<ul>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
</ul>
</li>
<li>Пункт 3</li>
</ul>
Замена точек у списка на другие символы:
<ul style="list-style-type: square;">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
Неупорядоченный список со ссылками:
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul>
Неупорядоченный список с изображениями:
<ul>
<li><img src="image1.jpg" alt="Картинка 1"></li>
<li><img src="image2.jpg" alt="Картинка 2"></li>
<li><img src="image3.jpg" alt="Картинка 3"></li>
</ul>
Неупорядоченный список с описанием:
<ul>
<li>
<h3>Пункт 1</h3>
<p>Описание пункта 1.</p>
</li>
<li>
<h3>Пункт 2</h3>
<p>Описание пункта 2.</p>
</li>
<li>
<h3>Пункт 3</h3>
<p>Описание пункта 3.</p>
</li>
</ul>
Неупорядоченный список с радиокнопками:
<ul>
<li><input type="radio" name="group1" value="1"> Вариант 1</li>
<li><input type="radio" name="group1" value="2"> Вариант 2</li>
<li><input type="radio" name="group1" value="3"> Вариант 3</li>
</ul>
Для чего использовать тег <ul>
- Для создания списка элементов: это наиболее распространенный вариант использования тега
<ul>
. - Для создания навигационного меню: тег
<ul>
часто используется для создания навигационного меню. Элементы списка могут быть оформлены как ссылки на различные страницы или разделы на одной странице. - Для отображения списка записей блога: тег
<ul>
можно использовать для создания списка постов блога с заголовками постов в качестве элементов списка. Нажав на заголовок поста, пользователь может перейти к полному тексту поста. - Для отображения списка товаров: сайты электронной коммерции часто используют тег
<ul>
для создания списка товаров с изображениями, описаниями и ценами в качестве элементов списка. - Для отображения списка иконок социальных сетей: тег
<ul>
можно использовать для создания списка иконок социальных сетей, которые ссылаются на различные профили социальных сетей. - Для создания списка опций: тег
<ul>
можно использовать для создания списка опций для формы. Каждый вариант может быть элементом списка с радиокнопкой или флажком. - Для создания списка часто задаваемых вопросов: тег
<ul>
можно использовать для создания списка часто задаваемых вопросов (FAQ) с вопросом в качестве элемента списка и ответом в качестве подэлемента.
Атрибуты тега <ul>
У тега нет специфических атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
- Тег
<ul>
не следует использовать для списков, требующих определенного порядка. В этом случае вместо него следует использовать тег<ol>
. - Тег
<ul>
следует использовать только для списка связанных элементов. Если элементы списка не связаны между собой, их следует разделить на разные списки или отобразить в другом формате.
Нюансы
- Если элемент в списке требует нескольких абзацев или подзаголовков, рекомендуется использовать вложенные элементы, такие как
<li>
и<ul>
, вместо тегов<br>
или<p>
. - Если элементы списка содержат изображения или видео, рекомендуется использовать теги
<figure>
и<figcaption>
для предоставления альтернативного текста и подписей. - У тега
<ul>
должен быть хотя бы один вложенный элемент<li>
.
Поддержка браузеров
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
<ol>
используется для создания упорядоченного списка элементов;<dl>
используется для создания списка описаний;<nav>
используется для создания раздела веб-страницы, содержащего навигационные ссылки.
Чем заменить тег
<div>
— общий контейнер, который можно использовать для группировки любого количества связанных элементов;<section>
используется для группировки связанного содержимого вместе и обычно имеет заголовок;<table>
используется для создания таблицы данных.
Актуальность
Тег <ul>
не устарел.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023