Атрибут data-* тега <a>

Описание

Атрибуты data-* позволяют хранить произвольные данные в HTML-элементах, включая ссылки <a>. Эти атрибуты полностью валидны в HTML5 и не влияют на отображение или поведение элемента.

Базовое использование:
<a href="#" data-id="12345">Товар #12345</a>
Хранение нескольких значений:
<a href="/product" data-product-id="789" data-category="electronics" data-price="199.99"> Смартфон Premium </a>

Особенности работы:

Свойство Описание
Синтаксис Любое имя после префикса data-
Типы данных Строки (числа и объекты нужно преобразовывать)
Доступ из JavaScript Через dataset или getAttribute
Доступ из CSS Через атрибутные селекторы
Пример доступа к данным:
<a href="#" data-user-id="42" data-role="admin">Профиль</a> <script> const link = document.querySelector('a'); console.log(link.dataset.userId); // "42" console.log(link.dataset.role); // "admin" link.dataset.lastActive = new Date().toISOString(); </script>

Популярные сценарии использования:

  • Хранение ID и метаданных для AJAX-запросов
  • Конфигурация JavaScript-виджетов
  • Аналитика и отслеживание событий
  • Тестирование (QA-метки)
  • Условная стилизация через CSS

Соглашения об именовании:

  • Используйте kebab-case (дефисы между словами)
  • Избегайте аббревиатур и сокращений
  • Будьте последовательны в именовании
  • Не используйте существующие HTML-атрибуты
  • Преобразуйте camelCase в kebab-case (dataUserId → data-user-id)

Совет: Для сложных данных используйте JSON в одном атрибуте: data-info='{"id":42,"role":"admin"}'