<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> используется для создания таблицы данных.