Тег <data>

Описание

Тег <data> связывает текстовое содержимое с машиночитаемым эквивалентом через атрибут value. Используется для семантической разметки данных, которые должны быть обработаны программами.

Связь текста с числовым значением:
<p> В корзине <data value="3">три товара</data>. </p>
Идентификация продукта:
<ul> <li> <data value="ISBN:978-5-389-14882-3"> "Мастер и Маргарита" М. Булгаков </data> </li> </ul>
Использование в JavaScript:
<data id="temp-data" value="23.5">23.5°C</data> <script> const temp = document.getElementById('temp-data').value; console.log(parseFloat(temp)); // 23.5 </script>

Ключевые особенности:

  • Атрибут value обязателен
  • Не изменяет визуальное отображение контента
  • Полезен для микроданных и микроформатов
  • Поддерживается всеми современными браузерами

Отличие от похожих тегов:

  • <time> - специализирован для дат и времени
  • <meta> - невидимые метаданные
  • <data> - связывает видимый текст с машинным значением

Практические применения:

  • Каталоги товаров (артикулы, коды)
  • Статистические данные
  • Финансовая информация
  • Любые данные, требующие машинной обработки

Для сложных структур данных рекомендуется использовать <data> вместе с микроформатами или микроданными.

Атрибуты

value Задает машинно-читаемое значение для содержимого элемента
class Задает один или несколько классов CSS для стилизации элемента
contenteditable Указывает, может ли пользователь редактировать содержимое элемента
data-* Используется для хранения пользовательских данных в элементах
dir Определяет направление текста: слева направо (ltr) или справа налево (rtl)
hidden Скрывает элемент, делая его невидимым и недоступным для пользователя
id Уникальный идентификатор элемента в документе
lang Определяет язык содержимого элемента
spellcheck Указывает, должна ли проверяться орфография в содержимом элемента
style Позволяет задавать CSS-стили непосредственно в атрибуте элемента
title Задает всплывающую подсказку при наведении на элемент
translate Указывает, должен ли переводиться текст внутри элемента

Поддержка браузерами
13.0 62.0 49.0 22.0 0.0