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

Описание

Атрибут id задаёт уникальный идентификатор для элемента <dd>. Этот идентификатор может использоваться для:

  • Стилизации через CSS
  • Обращения к элементу через JavaScript
  • Создания якорей для навигации по странице
  • Связывания с элементами форм через <label>
Пример использования:
<dl> <dt>HTML</dt> <dd id="html-definition">Язык гипертекстовой разметки для создания веб-страниц</dd> <dt>CSS</dt> <dd id="css-definition" class="tech-description">Язык стилей для оформления веб-страниц</dd> </dl>

Правила именования ID:

Правило Пример Неправильно
Должен начинаться с буквы id="definition1" id="1definition"
Может содержать буквы, цифры, дефисы, подчёркивания id="tech-definition" id="tech@definition"
Должен быть уникальным в пределах страницы - Повторение одинаковых ID
Чувствителен к регистру id="myID" ≠ id="myid" -

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

<style> /* Стиль для конкретного определения */ #html-definition { color: #e34c26; font-weight: bold; } /* Сочетание с классом */ #css-definition.tech-description { color: #2965f1; border-left: 3px solid #2965f1; padding-left: 10px; } </style> <dl> <dt>HTML</dt> <dd id="html-definition">...</dd> <dt>CSS</dt> <dd id="css-definition" class="tech-description">...</dd> </dl>

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

<dl> <dt>JavaScript</dt> <dd id="js-definition">Язык программирования для веб-страниц</dd> </dl> <button onclick="highlightDefinition()">Подсветить определение</button> <script> function highlightDefinition() { const definition = document.getElementById('js-definition'); definition.style.backgroundColor = '#ffffcc'; definition.style.padding = '10px'; definition.style.transition = 'all 0.3s'; } </script>

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

<!-- Навигация по странице --> <ul> <li><a href="#html-def">HTML</a></li> <li><a href="#css-def">CSS</a></li> </ul> <dl style="margin-top: 500px;"> <dt>HTML</dt> <dd id="html-def">Определение HTML...</dd> <dt>CSS</dt> <dd id="css-def">Определение CSS...</dd> </dl>

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

  • Используйте осмысленные имена, отражающие назначение элемента
  • Избегайте избыточного использования ID - применяйте для уникальных элементов
  • Для стилизации предпочтительнее использовать классы
  • Сочетайте с ARIA-атрибутами для улучшения доступности
  • Не используйте ID для хранения данных - для этого есть data-* атрибуты

Важные замечания:

  • ID должны быть уникальными в пределах всей страницы
  • Дублирование ID может привести к ошибкам в JavaScript
  • В отличие от классов, к элементу можно обращаться по ID без селекторов
  • ID имеют высший приоритет в CSS (специфичность 0,1,0,0)

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