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

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