HTML тег <data>

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

Это полезно, когда скриптам нужны данные в определённом формате, который вы не хотите показывать пользователю. Например, представьте список товаров. Каждый товар имеет внутренний идентификатор, но покупателям нужно видеть только название товара. Вы помещаете идентификатор в атрибут value, а читаемое название — между тегами, и тогда JavaScript сможет читать идентификатор, пока пользователь видит название:

<data value="1545325112">Coca-Cola 500ml</data>

Здесь 1545325112 — машиночитаемое значение (идентификатор товара), а Coca-Cola 500ml — то, что видит пользователь.

Когда использовать <data>

<data> — один из нескольких способов прикрепить машиночитаемые данные к содержимому. Важно выбрать правильный:

• Используйте <data>, когда есть видимый фрагмент текста, у которого есть естественный машиночитаемый аналог — идентификатор товара, номер заказа, артикул (SKU), значение перечисления, рейтинг, выраженный числом. Элемент является полноценным HTML-элементом, поэтому связь между текстом и значением является частью семантики документа.
• Используйте data-* пользовательский атрибут (например, data-product-id="1545325112"), когда значение принадлежит любому элементу и вам просто нужно место, откуда ваши скрипты смогут его читать. data-* более гибок, потому что его можно добавить к любому тегу с любым именем атрибута, однако он не несёт стандартизированного смысла.
• Используйте микроданные (itemprop) или JSON-LD, когда цель — предоставить структурированные данные поисковым системам (schema.org). Элемент <data> сам по себе не сообщает Google, что означает значение.

Распространённый паттерн — сочетание <data> с микроданными: itemprop называет свойство, а value хранит точное значение:

<data itemprop="productID" value="1545325112">Coca-Cola 500ml</data>

<data> и <time>

Элемент <time> — специализированный аналог <data>. Граница между ними проста:

• Используйте <time> только для дат, времени, продолжительности и часовых поясов (у него есть собственный атрибут datetime и определённый формат разбора).
• Используйте <data> для любых других видов машиночитаемых значений — идентификаторов, цен, количеств, кодов и т. д.

Таким образом, <time datetime="2026-06-17">June 17</time> — правильно, но идентификатор товара никогда не следует оборачивать в <time>.

Чтение значения с помощью JavaScript

<data> представлен интерфейсом HTMLDataElement, свойство value которого отражает одноимённый атрибут. Поэтому его можно читать напрямую:

<data id="drink" value="1545325112">Coca-Cola 500ml</data>

<script>
  const el = document.getElementById("drink");

  console.log(el.value);                  // "1545325112"  (HTMLDataElement.value)
  console.log(el.getAttribute("value"));  // "1545325112"  (raw attribute)
  console.log(el.textContent);            // "Coca-Cola 500ml"  (visible text)
</script>

И el.value, и el.getAttribute("value") возвращают машиночитаемую строку; textContent даёт человекочитаемую метку.

Доступность

Вспомогательные технологии, такие как программы чтения с экрана, объявляют видимое текстовое содержимое, а не атрибут value. Пользователь программы чтения с экрана слышит «Coca-Cola 500ml», но никогда не слышит «1545325112».

По этой причине видимый текст всегда должен быть осмысленным сам по себе. Никогда не скрывайте информацию, нужную пользователю, внутри value и не рассчитывайте на то, что программы чтения с экрана её озвучат. Воспринимайте value исключительно как данные для скриптов, а весь смысл, предназначенный для людей, храните в тексте элемента.

Поддержка браузерами и SEO

Все современные браузеры обрабатывают <data>, однако специальной визуальной или поведенческой отрисовки нет — он отображается точно как <span>. Его назначение сугубо семантическое.

По той же причине <data> не является заменой структурированных данных. Поисковые системы не интерпретируют голый атрибут value как данные schema.org. Если вам нужны расширенные результаты, используйте микроданные (itemprop) или, что более принято сегодня, JSON-LD.

Синтаксис

Тег <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>

Атрибуты

Тег <data> также поддерживает глобальные атрибуты и атрибуты событий.

Практика