HTML глобальный атрибут: data-* (данные-*)

Глобальный атрибут data-* образует класс атрибутов, называемых пользовательскими атрибутами данных , которые позволяют обмениваться частной информацией между HTML и его представлением DOM с помощью сценариев.

Используется для хранения пользовательских данных, относящихся к конкретной странице или приложению.

Интерактивный пример

В данном примере к элементу <meter> добавляется атрибут data-description содержащий необходимый текст для вывода. Само отображение происходит с помощью псевдоэлемента ::after и свойства content, значением которого как раз и выступает функция attr().

Использование

Примечание
Имя атрибута должно обязательно начинаться с data-, дальше можно использовать латинские буквы в нижнем регистре, цифры и следующие символы: дефис (-), двоеточие (:), подчёркивание (_).

Имена атрибутов трансформируются в переменные, к которым в дальнейшем можно обращаться и получать значения, по следующим правилам:

data- удаляется;
любой дефис идущий перед буквой удаляется, а буква за ним становится заглавной;
любые другие буквы остаются неизменными.

Например, атрибут data-date-of-birth преобразуется в переменную dateOfBirth.

data-description превращается в description.
data-full-description превращается fullDescription.
data-description-of-tag превращается descriptionOfTag.

Синтаксис

<element data-*="значение">

<div id="user" data-id="1234567890" 
       data-user="Вася Пупкин" 
       data-date-of-birth="01.04.1990">Пользователь</div>

Значения атрибута

Значения: Определяет значение атрибута (в виде строки)
Значение по умолчанию: Нет.

Ссылки и Дополнения

Более подробное руководство по использованию атрибутов данных HTML см. в разделе Использование атрибутов данных.