Тег <ul>
Описание
Тег <ul> (unordered list) создаёт маркированный список элементов. Это блочный элемент, который по умолчанию отображает элементы списка (<li>) с маркерами (обычно чёрными кружками).
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
Ключевые особенности:
- Может содержать только элементы
<li> - Поддерживает вложенные списки (другие
<ul>или<ol>) - По умолчанию добавляет отступы и маркеры
- Важен для семантики и доступности
<!-- Простой список -->
<ul>
<li>Молоко</li>
<li>Хлеб</li>
<li>Яйца</li>
</ul>
<!-- Вложенные списки -->
<ul>
<li>Раздел 1
<ul>
<li>Подпункт 1.1</li>
<li>Подпункт 1.2</li>
</ul>
</li>
<li>Раздел 2</li>
</ul>
Стилизация через CSS:
<style>
/* Базовая стилизация */
ul {
list-style-type: disc; /* Круги (по умолчанию) */
padding-left: 20px;
}
/* Кастомные маркеры */
ul.custom {
list-style-type: none;
padding-left: 0;
}
ul.custom li {
padding-left: 25px;
position: relative;
}
ul.custom li::before {
content: "→";
position: absolute;
left: 0;
color: #4CAF50;
}
/* Горизонтальное меню */
ul.horizontal {
display: flex;
gap: 15px;
list-style: none;
padding: 0;
}
</style>
<ul class="custom">
<li>Элемент с кастомным маркером</li>
<li>Ещё один элемент</li>
</ul>
Рекомендации по использованию:
- Используйте для логических групп элементов без порядка
- Для нумерованных списков применяйте
<ol> - Избегайте глубокой вложенности (более 3 уровней)
- Для навигационных меню используйте
<nav>с<ul> - Сочетайте с ARIA-ролями для сложных списков
Тег <ul> является семантически правильным способом создания маркированных списков, обеспечивая хорошую структуру контента и возможности гибкой стилизации.
Атрибуты
| accesskey | Горячая клавиша для активации |
| class | CSS-классы для стилизации |
| contenteditable | Разрешает редактирование |
| data-* | Пользовательские данные |
| dir | Направление текста |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор |
| lang | Язык содержимого |
| style | Инлайновые стили |
| tabindex | Порядок перехода |
| title | Всплывающая подсказка |
| translate | Определяет возможность перевода |
| compact | Компактный вид списка |
| type | Тип маркера (disc, circle и др.) |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 3.0 | 1.0 | 2.0 | 1.0 | 1.0 |