Атрибут id тега <li>

Описание

Атрибут id задаёт уникальный идентификатор для элемента <li>. Этот идентификатор может использоваться для стилизации через CSS, обращения через JavaScript или создания якорей для навигации.

Пример использования:
<ul> <li id="main-item">Главный пункт с уникальным ID</li> <li id="secondary-item">Дополнительный пункт</li> </ul>

Особенности работы:

Характеристика Описание Важно
Уникальность ID должен быть единственным в рамках документа Не допускайте дублирования
Синтаксис Должен начинаться с буквы, может содержать цифры, дефисы, подчёркивания Чувствителен к регистру
Использование Для CSS (#id), JavaScript (getElementById), якорей (#id) Избегайте спецсимволов

Использование в JavaScript:

<ul> <li id="dynamic-list-item">Нажмите кнопку чтобы изменить этот пункт</li> </ul> <button onclick="changeItem()">Изменить пункт</button> <script> function changeItem() { const item = document.getElementById('dynamic-list-item'); item.textContent = 'Текст изменён через JavaScript!'; item.style.color = 'red'; } </script>

Стилизация через ID:

<style> #special-item { background-color: #ffe0b2; border-left: 3px solid #ff9800; padding: 8px; font-weight: bold; } </style> <ul> <li id="special-item">Особый пункт с уникальным стилем</li> <li>Обычный пункт списка</li> </ul>

Рекомендации по использованию:

  • Используйте осмысленные имена (например, user-profile-item)
  • Избегайте общих названий вроде item1, test
  • Для повторяющихся элементов используйте классы вместо ID
  • Придерживайтесь единого стиля именования (kebab-case рекомендуем)

Создание якорей:

<ul> <li id="section1">Раздел 1</li> <li>Содержание раздела 1...</li> <li id="section2">Раздел 2</li> <li>Содержание раздела 2...</li> </ul> <a href="#section1">Перейти к Разделу 1</a> | <a href="#section2">Перейти к Разделу 2</a>

SEO и доступность:

  • ID помогают в навигации по странице
  • Могут использоваться поисковыми системами
  • Не злоупотребляйте - слишком много ID усложняют поддержку
  • Сочетайте с ARIA-атрибутами для улучшения доступности

Примечание: Хотя ID обеспечивают быстрый доступ к элементам, в современных веб-приложениях предпочтительнее использовать классы и data-атрибуты для большинства задач. ID идеально подходят для уникальных элементов, которые требуют точного целевого обращения.