HTML-тег <data>
Тег <data> является элементом HTML5.1. Он используется для определения машиночитаемого аналога указанных данных (стандартизированной версии, понятной автоматизированным системам или скриптам на сайте).
Это может быть полезно в случаях, когда данные должны быть в определенном формате, необходимом для работы скриптов, но вы не хотите, чтобы пользователи видели этот формат. Например, вы хотите отобразить список продуктов для выбора пользователями. У каждого продукта есть свой ID, но вы не хотите показывать эту информацию пользователям. Тогда вы помещаете ID продуктов в тег <data>, а машина обработает эту информацию и покажет пользователям продукт с соответствующим ID.
Тег <data> использует атрибут value для хранения машиночитаемой версии своего содержимого. Это позволяет скриптам обрабатывать базовое значение, одновременно отображая другой текст пользователям.
Видимый контент внутри тега <data> должен быть описательным, поскольку вспомогательные технологии могут не считывать атрибут value. Кроме того, атрибут value может не индексироваться поисковыми роботами.
Мы рекомендуем использовать тег <time>, если значение связано с датой или временем.
Синтаксис
Тег <data> является парным. Содержимое записывается между открывающим (<data>) и закрывающим (</data>) тегами.
Пример использования HTML-тега <data>:
HTML-тег <data>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Refrigerated drinks</p>
<ul>
<li>
<data value="1545325112">Coca-Cola 500ml</data>
</li>
<li>
<data value="1545325113">Coca-Cola 330ml</data>
</li>
<li>
<data value="1545325114">Coca-Cola Light 330ml</data>
</li>
</ul>
</body>
</html>Результат
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| value | машиночитаемый формат | Устанавливает машиночитаемую версию содержимого тега <data>. |
Тег <data> также поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
Для чего используется тег <data> в HTML и что он представляет?