Атрибут data-* тега <dl>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементах <dl> (списках определений) для использования в JavaScript или CSS. Эти атрибуты не влияют на отображение по умолчанию.
<dl data-category="programming" data-created="2023-05-15">
<dt data-term-type="language">HTML</dt>
<dd data-importance="high">Язык гипертекстовой разметки</dd>
<dt data-term-type="protocol">HTTP</dt>
<dd>Протокол передачи гипертекста</dd>
</dl>
Основные особенности:
| Характеристика | Описание |
|---|---|
| Синтаксис | Любое имя после data-: data-имя="значение" |
| Типы данных | Могут хранить строки, числа, JSON (в виде строки) |
| Доступ | Через JavaScript (dataset) или CSS (attr()) |
Доступ к данным в JavaScript:
<dl id="techTerms" data-category="web" data-visible="true">
<dt data-id="html">HTML</dt>
<dd>Язык разметки</dd>
</dl>
<script>
const dl = document.getElementById('techTerms');
// Чтение данных
console.log(dl.dataset.category); // "web"
console.log(dl.dataset.visible); // "true"
// Изменение данных
dl.dataset.visible = "false";
dl.dataset.lastUpdated = "2023-11-20";
// Доступ к данным вложенных элементов
const dt = dl.querySelector('dt');
console.log(dt.dataset.id); // "html"
</script>
Использование в CSS:
<style>
/* Стиль по данным атрибуту */
dt[data-term-type="language"] {
color: #3498db;
font-weight: bold;
}
/* Псевдоэлементы с содержимым из data-атрибута */
dd[data-importance]::after {
content: " (" attr(data-importance) ")";
font-size: 0.8em;
color: #7f8c8d;
}
</style>
<dl>
<dt data-term-type="language">JavaScript</dt>
<dd data-importance="critical">Язык программирования</dd>
<dt data-term-type="framework">React</dt>
<dd data-importance="high">Библиотека для UI</dd>
</dl>
Рекомендации по использованию:
- Используйте для хранения информации, связанной с элементом
- Придерживайтесь единого стиля именования (kebab-case)
- Для сложных данных используйте JSON в строке:
data-options='{"key":"value"}' - Избегайте хранения большого объема данных (лучше использовать AJAX)
- Не используйте для информации, которая должна быть видна без JavaScript
Пример с JSON данными:
<dl>
<dt data-term='{"id":"css","type":"styling"}'>CSS</dt>
<dd data-meta='{"versions":["2","3"],"spec":"W3C"}'>
Каскадные таблицы стилей
</dd>
</dl>
<script>
const dt = document.querySelector('dt');
const termData = JSON.parse(dt.dataset.term);
console.log(termData.type); // "styling"
const dd = document.querySelector('dd');
const metaData = JSON.parse(dd.dataset.meta);
console.log(metaData.versions); // ["2","3"]
</script>
Ограничения и особенности:
- Значения всегда строки (нужно преобразовывать числа/булевы)
- Не поддерживают сложные структуры данных без JSON
- Доступны только после полной загрузки DOM
- Не влияют на SEO (поисковые системы их не индексируют)
Примечание: Атрибуты data-* предоставляют удобный способ хранения дополнительной информации прямо в HTML-разметке. Они особенно полезны для интерактивных списков определений, где требуется сохранять состояние или мета-информацию о терминах.