Тег <data>

Тег <data> (укр. — “дані”) в HTML використовується для зв’язування видимого тексту з машинозчитуваним значенням. Це корисно, коли є відображуване значення для користувача, а також — структуровані дані для парсерів, пошукових систем, скриптів, аналітики тощо.

По суті, <data> дозволяє зберігати додаткову семантичну інформацію поряд із текстовим контентом.

Атрибути

Специфічні атрибути

  • value — визначає машинозчитуване значення, яке пов’язане з текстовим вмістом елемента. Наприклад:
<time datetime="2025-06-16">16 червня 2025</time>

Глобальні атрибути

Тег <data> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<data id="order-number" value="12345">Замовлення #12345</data>
  • class — для CSS-стилізації. Наприклад:
<data class="user-id" value="987">Користувач: 987</data>
  • style — для інлайн-стилів. Наприклад:
<data style="color: green;" value="USD">Долар США</data>
  • title — підказка при наведенні. Наприклад:
<data title="Код валюти" value="USD">Долар</data>
  • lang — вказує мову вмісту. Наприклад:
<data lang="uk" value="2025">2025 рік</data>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання data</title>
    <style>
        data {
            font-weight: bold;
            color: darkgreen;
        }
    </style>
</head>
<body>
    <h2>Список замовлень:</h2>

    <ul>
        <li>Замовлення: <data value="12345">#12345</data></li>
        <li>Замовлення: <data value="12346">#12346</data></li>
        <li>Замовлення: <data value="12347">#12347</data></li>
    </ul>

    <p>Валюта: <data value="EUR">Євро</data></p>
</body>
</html>

Додаткові моменти

  • Основна мета — дати можливість скриптам чи зовнішнім системам легко отримувати структуровані значення.
  • Не плутати з data-* атрибутами — це різні речі:
    • <data> — для семантики;
    • data-* — для зберігання довільних даних у DOM.
  • Значення value не відображається на сторінці, а використовується для парсингу або обробки.
  • Особливо корисно при генерації списків, ID, кодів, метрик.
  • Повністю підтримується сучасними браузерами.