Тег data связывает видимый текст с машиночитаемым значением. Читатель видит «1 290 ₽», а в атрибуте value записано число 1290, которое скрипт может сравнить, отсортировать или отправить на сервер. Тег парный, закрывающий обязателен, атрибут value обязателен.
Отдельно разобраны data-* - пользовательские атрибуты, которые можно записать у любого тега. Их ищут вместе с тегом data и часто путают с ним. Ниже: что такое тег, что записывать в value, как устроены data-атрибуты, как читать их на JS и в CSS, что ещё называют data в HTML и как выбрать нужное.
<p>Мышь:
<data value="1290">1 290 ₽</data></p>В этой статье
- Тег data в HTML: что это и для чего нужен
- Атрибут value в теге data: что в него записывать
- Data-атрибуты тегов: что это и чем отличаются от тега data
- Data-атрибуты в CSS и JS: селекторы, attr() и dataset
- Что ещё называют data в HTML: td, meta, object и адрес data:
- Тег data, time или data-атрибут: как выбрать
- Частые ошибки с тегом data
Тег data в HTML: что это и для чего нужен
Тег отмечает значение, у которого два вида: для человека и для программы. Человек читает текст внутри, например «1 290 ₽» или «шесть штук». Программа берёт значение из атрибута value: 1290 или 6. Так скрипту не приходится вытаскивать число из строки с пробелами, знаком рубля или словом.
Сам браузер с value ничего не делает. В Chrome data выглядит как обычный текст: строчный, без курсива и подчёркивания, в заголовке жирный, в ссылке берёт цвет ссылки. При копировании в буфер попадает только текст внутри, значение из value не копируется. Значение читают программы: скрипт через свойство value, обработчики микроданных, сортировщики таблиц. Так тег описан в стандарте WHATWG, есть и справка MDN.
const price = document.querySelector('data');
console.log(price.value); // 1290Если значение - дата или время, вместо data берут тег time: в нём есть готовые форматы и проверка значения.
Атрибут value в теге data: что в него записывать
В value записывают то, что программе удобнее получить отдельно от текста: число без пробелов и знака валюты, номер, код, идентификатор. Стандарт требует, чтобы там было представление содержимого в машиночитаемом виде, а формат не задаёт. Например, текст «шесть штук» и значение 6, название товара и его артикул 5501, цена «1 290 ₽» и число 1290.
Главная польза - сортировка и вычисления. Если цены записаны как «1 290 ₽» и «990 ₽», скрипт, который сравнивает текст как строки, выведет «1 290 ₽» раньше «990 ₽»: символы сравниваются по одному, а «1» меньше «9». Число из value сравнивается правильно. Похожий пример есть и в стандарте: колонка таблицы сортируется по числам из value, хотя в тексте они записаны по-другому.
<tr>
<td>Мышь</td>
<td><data value="1290">1 290 ₽</data></td>
</tr>Без value тег перестаёт выполнять свою работу: свойство value вернёт пустую строку, а текст останется просто текстом. Значение можно записать и скриптом: el.value = '990' изменит атрибут. Ещё одно применение - микроданные: значение свойства берётся из value у data, как из datetime у time.
Пример: сортировка цен
Три кнопки меняют порядок строк. Кадр сортирует цены то как текст, то по числу из value и проверяет, идут ли они по возрастанию.
Data-атрибуты тегов: что это и чем отличаются от тега data
Data-атрибут - пользовательский атрибут, название которого начинается с data-: его можно записать у любого тега, например у div, button или li. Он нужен скриптам страницы, чтобы хранить рядом с элементом служебные данные: идентификатор, состояние, настройку. Это не тег и не то же самое, что тег data.
<button data-action="delete" data-id="42">
Удалить
</button>Название состоит из data- и хотя бы одного символа после дефиса. Заглавных букв в названии быть не должно: в HTML-документе браузер сам заменяет их строчными, и data-Foo превращается в data-foo. Слова разделяют дефисом, например data-user-id. Значение - всегда строка.
Скрипт читает такие атрибуты через свойство dataset. Название превращается в camelCase: дефис убирается, следующая буква становится заглавной, поэтому data-user-id даёт ключ userId. Обратное преобразование работает так же: запись dataset.fooBar = 1 создаёт атрибут data-foo-bar. Если в ключе после дефиса стоит строчная буква, например dataset['a-b'], браузер выбрасывает ошибку SyntaxError.
const btn = document.querySelector('button');
btn.dataset.id; // '42'
btn.dataset.fooBar = 1; // data-foo-bar='1'Значения приходят строками: число 42 придёт как «42». Атрибут без значения, например data-flag, даёт пустую строку, а несуществующий ключ даёт undefined. Стандарт предназначает data-атрибуты для скриптов самой страницы. Хранить в них то, что должен увидеть читатель или найти поисковик, не стоит: справка MDN предупреждает, что помощники для чтения и поисковые роботы могут такие значения не получить.
Пример: название data-атрибута и ключ в dataset
Введите название атрибута или ключ. Кадр записывает его в настоящий элемент и показывает, что получилось в документе и в dataset, а какие записи браузер не принимает.
Data-атрибуты в CSS и JS: селекторы, attr() и dataset
Data-атрибуты удобно использовать как переключатели состояния: скрипт меняет значение, а CSS реагирует на него селектором атрибута. Так не нужно записывать и убирать лишние классы.
.order[data-state=paid] {
background: #dff3ea;
}
.order::before {
content: 'Заказ ' attr(data-id);
}Селектор [data-state=paid] выбирает элементы с таким значением, а [data-flag] - все, у кого атрибут есть, с любым значением. Функция attr() в свойстве content выводит значение атрибута как текст. Такой текст читатель не сможет выделить и скопировать, поэтому для важных данных он не подходит.
el.dataset.state = 'paid';Значение можно записать и сложнее, например в виде JSON, и разобрать через JSON.parse. Но если данных много, лучше хранить их в самом скрипте, а в атрибуте оставлять только идентификатор.
Пример: состояние блока в data-атрибуте
Кнопки меняют значения data-state и data-id у блока через dataset. Селекторы атрибутов и attr() в CSS кадра сразу меняют цвет и надпись.
Что ещё называют data в HTML: td, meta, object и адрес data:
Слово data встречается в HTML в нескольких значениях, и в поиске их смешивают. Название td расшифровывается как table data, «данные таблицы», но к тегу data отношения не имеет.
| Что ищут | Что это | Где записывается |
|---|---|---|
data | Тег: значение для программы рядом с текстом | Тег в тексте страницы |
data-* | Пользовательский атрибут для скриптов и CSS | Атрибут любого тега |
td | Ячейка таблицы, название от table data | Тег внутри строки таблицы |
meta | Сведения о странице: кодировка, описание | Тег в head |
data у object | Адрес файла, который подключает тег | Атрибут: <object data="file.pdf"> |
data: | Адрес, в который вложено содержимое файла | Значение атрибута src или href |
Тег data, time или data-атрибут: как выбрать
Выбор зависит от того, что это за значение и кому оно нужно. Дату и время записывают тегом time, сокращение с расшифровкой - тегом abbr, а служебные данные для скрипта и CSS записывают в data-атрибут.
| Что нужно записать | Что выбрать | Почему |
|---|---|---|
| Читатель видит текст, а программе нужно число или код рядом | data | Текст и значение записаны в одном месте |
| Дата или время | time | Значение проверяется по форматам datetime |
| Служебные данные: идентификатор, состояние | data-* | Читателю они не нужны, скрипт и CSS их читают |
| Текст, который должен увидеть читатель и найти поисковик | Обычный текст | Data-атрибуты для видимого содержимого не предназначены |
Пример: что выбрать
Шесть ситуаций. Выберите вариант, и кадр объяснит выбор.
Частые ошибки с тегом data
Ошибки чаще всего связаны с путаницей между тегом и атрибутом и с ожиданием, что значение станет видимым или числовым.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Тег без значения: <data>1 290 ₽</data> | Свойство value пустое, тег работает как обычный текст | Добавить value="1290" |
Дата в теге data: <data value="2026-09-25">25 сентября</data> | Формат значения никто не проверяет, а для дат есть готовый тег | Тег time с datetime="2026-09-25" |
Атрибут без дефиса: <div data="42"> | Это не data-атрибут, скрипт не найдёт значение через dataset | <div data-id="42"> |
Заглавные буквы в названии: data-userId="42" | Браузер запишет data-userid, и ключ в dataset будет userid, а не userId | Разделять слова дефисом: data-user-id |
Ждут число: dataset.count + 1, когда data-count="5" | Значение - строка, получится «51», а не 6 | Перевести в число: Number(dataset.count) + 1 |
Видимый текст в атрибуте: <div data-title="Скидка 20%"> | Читатель может не увидеть текст, а поисковый робот или программа для чтения - не получить его | Записать текст внутрь тега |
Ключ с дефисом: dataset['a-b'] | Браузер выбрасывает SyntaxError | Ключ в camelCase: dataset.aB, или getAttribute('data-a-b') |
Ждут, что value покажется на странице | Значение в атрибуте не видно и не копируется | Записать значение в тексте или вывести через attr(value) в CSS |
Тег data ради служебного номера: <data value="42"></data> | Лишний пустой элемент в разметке | Атрибут data-id="42" у нужного тега |
