Атрибут data-* тега <dt>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементах <dt> (терминах списка определений) для использования в JavaScript или CSS. Эти пользовательские атрибуты не влияют на отображение по умолчанию.
<dl>
<dt data-term-id="html" data-category="markup" data-importance="high">HTML</dt>
<dd>Язык гипертекстовой разметки</dd>
<dt data-term-id="css" data-category="styling">CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>
Основные возможности:
| Применение | Пример | Описание |
|---|---|---|
| Хранение метаданных | data-term-id="html" |
Уникальный идентификатор термина |
| Категоризация | data-category="markup" |
Группировка терминов по категориям |
| Взаимодействие с JS | data-importance="high" |
Дополнительные параметры для скриптов |
Доступ к данным в JavaScript:
<dl>
<dt id="js-term" data-term-level="advanced" data-difficulty="3">JavaScript</dt>
<dd>Язык программирования</dd>
</dl>
<script>
const term = document.getElementById('js-term');
// Чтение данных
console.log(term.dataset.termLevel); // "advanced"
console.log(term.dataset.difficulty); // "3" (строка)
// Изменение данных
term.dataset.difficulty = "4";
term.dataset.lastUpdated = new Date().toISOString();
// Преобразование в число
const difficultyNum = parseInt(term.dataset.difficulty);
</script>
Использование в CSS:
<style>
/* Стилизация по уровню сложности */
dt[data-difficulty="1"] {
color: #28a745;
}
dt[data-difficulty="2"] {
color: #ffc107;
}
dt[data-difficulty="3"] {
color: #dc3545;
}
/* Добавление иконки через псевдоэлемент */
dt[data-category]::after {
content: " (" attr(data-category) ")";
font-size: 0.8em;
color: #6c757d;
}
</style>
<dl>
<dt data-difficulty="1" data-category="markup">HTML</dt>
<dd>Язык разметки</dd>
<dt data-difficulty="3" data-category="programming">JavaScript</dt>
<dd>Язык программирования</dd>
</dl>
Практический пример с JSON:
<dl>
<dt data-term-info='{"id":101,"tags":["web","frontend"]}'>React</dt>
<dd>Библиотека для UI</dd>
</dl>
<script>
const term = document.querySelector('dt');
const termInfo = JSON.parse(term.dataset.termInfo);
console.log(termInfo.tags); // ["web", "frontend"]
</script>
Рекомендации по именованию:
- Используйте kebab-case (дефисы между словами)
- Избегайте слишком длинных имен
- Придерживайтесь единого стиля в проекте
- Используйте осмысленные имена, отражающие содержание данных
Ограничения и особенности:
- Значения всегда строки (для чисел нужно преобразование)
- Не поддерживают сложные структуры данных без JSON
- Не влияют на SEO (поисковые системы их не индексируют)
- Доступны только после полной загрузки DOM
Примечание: Атрибуты data-* особенно полезны для интерактивных списков терминов, где требуется хранить дополнительные метаданные. Для сложных структур данных рассмотрите использование JavaScript-объектов вместо множества data-атрибутов.