<data> - тег для машиночитабельних даних

HTML-тег <data> пов'язує певний вміст із його машиночитабельним перекладом. Це дозволяє надати просте для читання значення, яке одночасно може бути оброблене скриптами.

HTML-елемент <data> використовується для зв'язування певного вмісту з його машиночитабельним еквівалентом. Це особливо корисно, коли потрібно відобразити для користувача зрозумілий текст, але при цьому мати можливість програмно обробляти стандартизоване значення.

Якщо вміст пов'язаний з датою або часом, замість <data> слід використовувати тег <time>.

HTML
<data value="машиночитабельне-значення">Текст для користувача</data>

Атрибути

Цей тег може мати глобальні атрибути.

value: Цей атрибут містить машиночитабельне значення, яке відповідає вмісту елемента. Він є обов'язковим і дозволяє скриптам легко отримувати та обробляти дані.

Важливі примітки

Тег <data> не слід плутати з data-* атрибутами. <data> є самостійним елементом для представлення даних, тоді як data-* атрибути дозволяють зберігати довільні дані на будь-якому HTML-елементі.

Основна перевага <data> полягає в семантичній чіткості: він явно вказує, що певний текст має машиночитабельний аналог. Це покращує доступність та полегшує взаємодію з даними для пошукових систем та інших автоматизованих інструментів.

Технічне резюме

Категорії вмісту	Потоковий контент, фразовий контент, відчутний контент.
Дозволений вміст	Фразовий вміст.
Пропуск тега	Ні, початковий і кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає фразовий вміст.
Дозволені ролі ARIA	Будь-які
DOM-інтерфейс	`HTMLDataElement`

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

<ul>
  <li><data value="sku-12345">Смартфон "Космос-X"</data></li>
  <li><data value="sku-67890">Ноутбук "Галактика-Про"</data></li>
  <li><data value="sku-24680">Навушники "Зоряний звук"</data></li>
</ul>

li {
  cursor: pointer;
  padding: 5px;
  border-bottom: 1px solid #eee;
}
li:hover {
  background-color: #f0f0f0;
}

document.addEventListener("click", (e) => {
	var item = e.target.closest("li")
	if(!item) return

	var dataElm = item.querySelector("data")

	notify(dataElm.value)
})

function notify(id) {
  var p = document.createElement("p")
  p.textContent = `Ви обрали товар з ID: ${id}`
	document.body.appendChild(p)
}

Підтримка браузерів



`data`
`value`