`<data>` HTML-элемент data

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает во многих устройствах и версиях браузеров. Она доступна во всех браузерах с октября 2017 года.

Элемент <data> HTML связывает фрагмент содержимого с машиночитаемым переводом. Если содержимое связано со временем или датой, необходимо использовать элемент <time>.

Попробуйте

<p>New Products:</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

data:hover::after {
  content: " (ID " attr(value) ")";
  font-size: 0.7em;
}

Атрибуты

Атрибуты этого элемента включают глобальные атрибуты.

value: Этот атрибут задаёт машиночитаемый перевод содержимого элемента.

Примеры

В следующем примере отображаются названия товаров, причём каждому названию также соответствует номер товара.

<p>New Products</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

Результат

Техническая сводка

Категории содержимого	Потоковое содержимое, фразовое содержимое, воспринимаемое содержимое.
Допустимое содержимое	Фразовое содержимое.
Опускание тегов	Не допускается: обязательны и открывающий, и закрывающий теги.
Допустимые родительские элементы	Любой элемент, допускающий фразовое содержимое.
Неявная роль ARIA	`generic`
Допустимые роли ARIA	Любые
Интерфейс DOM	`HTMLDataElement`

Спецификации

Спецификация
HTML> # the-data-element>

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`data`	62	14	22	49	10	62	22	46	10	8.0	62	10
`value`	62	14	22	49	10	62	22	46	10	8.0	62	10

См. также

Элемент HTML <time>.

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/data

<data> HTML-элемент data