Атрибут data-* тега <data>
Описание
Атрибуты data-* для тега <data> позволяют хранить дополнительную информацию, связанную с элементом. Эти пользовательские атрибуты идеально сочетаются с семантической природой тега <data>, позволяя создавать сложные структуры данных.
<ul>
<li>
<data value="temp_c:25"
data-unit="°C"
data-location="Москва"
data-accuracy="±0.5">
25 градусов
</data>
</li>
</ul>
Особенности работы:
| Аспект | Описание |
|---|---|
| Синтаксис | Любое имя после префикса data- (lowercase рекомендовано) |
| Доступ из JavaScript | Через свойство dataset или getAttribute() |
| CSS-доступ | Через атрибутные селекторы [data-*] |
| Совместимость | Полная поддержка во всех современных браузерах |
Практические примеры:
1. Доступ через JavaScript:
<data id="product"
value="P-1001"
data-category="electronics"
data-price="299.99">
Смартфон X
</data>
<script>
const product = document.getElementById('product');
console.log(product.dataset.category); // "electronics"
console.log(product.dataset.price); // "299.99"
// Изменение данных
product.dataset.discount = "15%";
</script>
2. Стилизация через CSS:
<style>
data[data-availability="in-stock"] {
color: green;
}
data[data-availability="out-of-stock"] {
color: red;
text-decoration: line-through;
}
</style>
<data value="B-200" data-availability="in-stock">В наличии</data>
Рекомендации по именованию:
- Используйте kebab-case (дефисы вместо подчёркиваний)
- Давайте осмысленные имена, отражающие содержание данных
- Избегайте слишком общих названий (
data-info) - Для сложных данных используйте JSON в одном атрибуте
- Документируйте используемые data-атрибуты
Пример с JSON-данными:
<data id="user"
value="u42"
data-profile='{"role":"admin","lastLogin":"2023-06-15"}'>
Администратор
</data>
<script>
const user = JSON.parse(document.getElementById('user').dataset.profile);
console.log(user.role); // "admin"
</script>
Сочетание с другими технологиями:
<!-- Микроразметка + data-атрибуты -->
<div itemscope itemtype="https://schema.org/Product">
<data itemprop="price" value="99.99" data-currency="USD">$99.99</data>
</div>
<!-- Использование с Vue.js -->
<data :data-info="vueDataProperty">...</data>
Примечание: Атрибуты data-* особенно полезны в сочетании с тегом <data>, так как позволяют создавать богатые семантические структуры данных, сохраняя при этом машинную читаемость информации. Они идеально подходят для хранения метаданных, состояния и дополнительных параметров.