<data>
- 25 января 2023
Что делает тег
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023