Атрибут data-* тега <abbr>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <abbr>. Эти пользовательские атрибуты полностью валидны в HTML5 и могут использоваться для JavaScript и CSS.
<abbr data-category="tech" title="Artificial Intelligence">AI</abbr>
Типичные сценарии применения:
| Применение | Пример |
|---|---|
| Хранение метаданных | data-category="technical" |
| Интеграция с JavaScript | data-tooltip-type="definition" |
| Условная стилизация | [data-importance="high"] { color: red; } |
<abbr data-language="en" data-domain="computing"
title="Random Access Memory">RAM</abbr>
<abbr data-frequency="high" data-tooltip-position="top"
title="User Interface">UI</abbr>
Доступ к данным через JavaScript:
<abbr data-term-id="42" data-category="tech" title="...">API</abbr>
<script>
const abbr = document.querySelector('abbr');
console.log(abbr.dataset.termId); // "42"
console.log(abbr.dataset.category); // "tech"
// Изменение данных
abbr.dataset.lastUsed = new Date().toISOString();
</script>
Рекомендации по именованию:
- Используйте осмысленные имена после префикса
data- - Придерживайтесь kebab-case (дефисы между словами)
- Избегайте слишком длинных имен
- Будьте последовательны в именовании
- Для сложных данных используйте JSON в одном атрибуте
Совет: Для хранения сложных структур данных используйте один data-атрибут с JSON: data-info='{"id":42,"category":"tech"}'