HTML-тег <ul>

HTML-тег <ul> используется для создания неупорядоченного списка на веб-странице. Неупорядоченный список по умолчанию отображает элементы в формате списка с маркерами, что делает его идеальным для представления элементов без определённого порядка, например, списков покупок, навигационных меню или описаний функций.

Тег <ul> работает совместно с тегом <li> , где каждый <li> представляет отдельный элемент списка.

Базовый синтаксис HTML-тега <ul>

Базовая структура неупорядоченного списка: 

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
Пример тега HTML ul

Элемент <ul> служит контейнером, а каждый <li> представляет элемент в списке.

Пример простого неупорядоченного списка

Вот пример списка покупок с использованием тега <ul> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Shopping List</h2>
        <ul>
            <li>Milk</li>
            <li>Eggs</li>
            <li>Bread</li>
        </ul>
    </body>
</html>
Пример простого неупорядоченного списка

Пояснение: пункты списка «Молоко», «Яйца» и «Хлеб» отображаются в виде маркеров.

Стилизация неупорядоченных списков с помощью CSS

Вы можете настроить внешний вид неупорядоченных списков с помощью CSS. Например, можно изменить стиль маркеров или вовсе удалить их: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul {
                list-style-type: square; /* Change bullets to squares */
                padding-left: 20px;
            }
            ul.no-bullets {
                list-style-type: none; /* Remove bullets */
            }
        </style>
    </head>
    <body>
        <h2>Styled List</h2>
        <ul>
            <li>Milk</li>
            <li>Eggs</li>
            <li>Bread</li>
        </ul>

        <h2>List without Bullets</h2>
        <ul class="no-bullets">
            <li>Milk</li>
            <li>Eggs</li>
            <li>Bread</li>
        </ul>
    </body>
</html>
Стилизация неупорядоченных списков с помощью CSS

Результат: в первом списке отображаются квадратные маркеры, а во втором списке маркеры отсутствуют из-за свойства list-style-type .

Вложенные неупорядоченные списки

Неупорядоченные списки могут быть вложенными для создания иерархических структур: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Grocery List</h2>
        <ul>
            <li>Fruits
                <ul>
                    <li>Apples</li>
                    <li>Oranges</li>
                </ul>
            </li>
            <li>Vegetables
                <ul>
                    <li>Carrots</li>
                    <li>Spinach</li>
                </ul>
            </li>
        </ul>
    </body>
</html>
Вложенные неупорядоченные списки с использованием тега ul

Пояснение: Вложенные теги <ul> создают подсписки в категориях «Фрукты» и «Овощи».

Атрибуты HTML-тега <ul>

  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .
  • Атрибуты событий: позволяет использовать обработчики событий, такие как onclick , onmouseover и onfocus .

Практическое применение тега <ul>

  • Меню навигации: используйте <ul> для создания панелей навигации с элементами списка в качестве ссылок.
  • Списки характеристик: отображение неупорядоченных списков характеристик продукта или услуг.
  • Многоуровневые списки: создавайте иерархический или категоризированный контент с помощью вложенных списков.
  • Адаптивный дизайн: используйте <ul> в качестве основы для сворачиваемых или расширяемых списков в дизайнах, оптимизированных для мобильных устройств.