Что делает тег

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

Синтаксис тега <data>

<data value="value_name">value_data</data>

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

Тег является частью спецификации HTML Living Standard.

Семантический или нет

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

Примеры использования

Количество продаж:

<p>Количество продаж за месяц: <data value="2356">2 356</data></p>

Список товаров с ценами:

<ul>
  <li><data value="15">15</data> товаров — <data value="500">500</data> рублей</li>
  <li><data value="25">25</data> товаров — <data value="1000">1000</data> рублей</li>
  <li><data value="50">50</data> товаров — <data value="2000">2000</data> рублей</li>
</ul>

Количество просмотров видео:

<p>Количество просмотров: <data value="1000000">1 000 000</data></p>

Для чего использовать тег <data>

  • Чтобы отобразить измерение или количество чего-либо.
  • Чтобы создать машиночитаемый текст.
  • Чтобы повысить доступность данных за счёт дополнительной информации.

Атрибуты тега <data>

value — содержимое элемента в машиночитаемом формате.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Для использования тега <data> нет никаких ограничений.

Нюансы

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

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

Тег <data> не поддерживается в некоторых старых браузерах, включая Internet Explorer. Актуальная информация — на сaniuse.

Альтернативные теги

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

Чем заменить тег

Тег <data> можно заменить на следующие теги, в зависимости от контекста:

  • <span>;
  • <div> — если данные представляют собой блок информации;
  • <abbr> — если данные представляют собой аббревиатуру.
  • <time> — для дат и времени.

Актуальность

Тег <data> не устарел, можете использовать его в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023