Атрибут id тега <dt>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <dt> (термина в списке определений), который может использоваться для:
- Стилизации через CSS
- Обращения через JavaScript
- Создания якорных ссылок
- Связи с элементами через атрибуты ARIA
Важно: Значение id должно быть уникальным в пределах документа!
Пример использования:
<dl>
<dt id="html-term">HTML</dt>
<dd>Язык гипертекстовой разметки</dd>
<dt id="css-term">CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>
<!-- Ссылка на термин -->
<a href="#html-term">Перейти к определению HTML</a>
Основные применения:
| Применение | Пример | Описание |
|---|---|---|
| CSS-стилизация | #html-term { color: red; } |
Стилизация конкретного термина |
| JavaScript доступ | document.getElementById('html-term') |
Получение элемента для манипуляций |
| Якорные ссылки | <a href="#html-term">...</a> |
Прямая ссылка на термин |
| ARIA-связи | aria-labelledby="html-term" |
Связь с другими элементами |
Правила именования:
- Должен начинаться с буквы (A-Z, a-z)
- Может содержать цифры (0-9), дефисы (-), подчеркивания (_), точки (.)
- Чувствителен к регистру
- Должен быть уникальным в рамках документа
- Рекомендуется использовать семантические имена
Пример комплексного использования:
<style>
#important-term {
font-weight: bold;
color: #d63384;
border-left: 3px solid #d63384;
padding-left: 10px;
}
</style>
<dl>
<dt id="important-term">API</dt>
<dd>Application Programming Interface</dd>
</dl>
<script>
// JavaScript доступ
const term = document.getElementById('important-term');
term.addEventListener('click', () => {
alert(`Вы кликнули на термин: ${term.textContent}`);
});
</script>
Сравнение с атрибутом class:
| Критерий | id |
class |
|---|---|---|
| Уникальность | Уникальный на странице | Может повторяться |
| CSS-специфичность | Высокая (#id) | Средняя (.class) |
| Использование | Для уникальных элементов | Для групп элементов |
Рекомендации по использованию:
- Используйте для действительно уникальных терминов
- Избегайте избыточного применения (не нужно всем терминам назначать id)
- Для стилизации предпочитайте классы, если стиль будет повторяться
- Придерживайтесь единого стиля именования в проекте
- Не используйте id для хранения данных (лучше data-*)
Пример с ARIA и доступностью:
<div aria-labelledby="term-title">
<h3 id="term-title">Глоссарий терминов</h3>
<dl>
<dt id="dom-term">DOM</dt>
<dd aria-labelledby="dom-term">Document Object Model</dd>
</dl>
</div>
Примечание: Хотя атрибут id очень полезен для конкретных задач, его следует использовать осмысленно. Для большинства случаев стилизации терминов лучше подходят классы, оставляя id для особых случаев, когда требуется уникальная идентификация элемента.