Справочник HTML & CSS

data-*

Свои атрибуты для хранения данных в разметке; имя начинается с `data-`.

Синтаксис

<div data-price="4.5">…</div>

Примеры

Данные доступны из CSS:

<style>
  [data-status="sold-out"] { opacity: 0.4; }
  .item::after { content: " — " attr(data-price); }
</style>
 
<p class="item" data-price="$4.50">Latte</p>
<p class="item" data-price="$3.00" data-status="sold-out">Mocha</p>

…и из JavaScript через dataset:

<button data-drink-id="17" onclick="this.textContent = 'Drink #' + this.dataset.drinkId">Show id</button>

Примечания

В JavaScript data-drink-id превращается в dataset.drinkId: дефисы убираются, следующая буква становится заглавной. Значения всегда строки. Не храните в data-атрибутах то, что должно быть видно пользователю или поисковикам.

См. также

class — Один или несколько классов элемента — основной способ обратиться к нему из CSS.
id — Уникальный идентификатор элемента на странице.

Вопросы и ответы по теме

Как сделать всплывающую подсказку

В учебнике

Атрибуты — Как устроены атрибуты HTML, глобальные атрибуты id, class, title, lang, hidden и style, логические атрибуты и data-атрибуты.

Спасибо, что читаете!