Атрибут id тега <ul>
Описание
Атрибут id задаёт уникальный идентификатор для списка <ul>. Этот идентификатор позволяет:
- Обращаться к списку из CSS и JavaScript
- Создавать якорные ссылки внутри страницы
- Связывать элементы форм с их описаниями
<ul id="main-navigation">
<li>Главная</li>
<li>О компании</li>
<li>Контакты</li>
</ul>
Правила именования ID:
- Должен начинаться с буквы (A-Z, a-z)
- Может содержать цифры, дефисы, подчёркивания, точки
- Должен быть уникальным в пределах документа
- Чувствителен к регистру (case-sensitive)
- Не должен содержать пробелов
Типичные применения:
| Тип списка | Пример ID | Назначение |
|---|---|---|
| Навигационное меню | main-nav, primary-menu |
Основная навигация по сайту |
| Список фильтров | product-filters |
Фильтрация товаров/контента |
| Дерево категорий | category-tree |
Иерархическая структура |
Пример стилизации через ID:
<style>
#special-list {
list-style-type: square;
border-left: 3px solid #3498db;
padding-left: 20px;
}
</style>
<ul id="special-list">
<li>Особый пункт 1</li>
<li>Особый пункт 2</li>
</ul>
Рекомендации:
- Используйте осмысленные имена (не "list1", "list2")
- Придерживайтесь единого стиля именования (kebab-case рекомендован)
- Для повторяющихся элементов используйте классы, а не ID
- Избегайте избыточности (не "ul-list", если это и так ul)
Ограничения:
- Один ID может быть присвоен только одному элементу
- Изменение ID может сломать существующие ссылки и скрипты
- Чрезмерное использование ID усложняет поддержку кода
Пример создания якорной ссылки:
<ul id="chapter-2">
<li>Пункт 2.1</li>
<li>Пункт 2.2</li>
</ul>
<a href="#chapter-2">Перейти к Главе 2</a>
Примечание: Хотя ID полезны для уникальных элементов, для стилизации списков чаще рекомендуется использовать классы, чтобы сохранить возможность повторного использования стилей.