<data>

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

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

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