HTML таг data

Пример

Кратък пример как се използва тагът <data>.

<ul class="list-group">
  <li class="list-group-item">
    <data value="101">Кафе еспресо</data> – 3.50 лв.
  </li>
  <li class="list-group-item">
    <data value="102">Капучино</data> – 4.20 лв.
  </li>
  <li class="list-group-item">
    <data value="103">Лате</data> – 4.80 лв.
  </li>
</ul>

<script>
  document.querySelectorAll('data').forEach(function (item) {
    console.log('Продукт:', item.textContent.trim(), 'ID:', item.value);
  });
</script>

Дефиниция и употреба

Виж как се ползва тагът <data>.

Елементът <data> свързва четим за човека текст с машинно-четима стойност чрез атрибута value. Това позволява на скриптове, търсачки и други инструменти да обработват по-лесно данните, без да се променя визуалното им представяне за потребителя.

Типичната употреба е, когато имате списък или таблица с елементи, които имат вътрешен идентификатор, код на продукт, SKU, числова стойност и др. Потребителят вижда описателен текст (например „Кафе еспресо“), а в value се съхранява реалната стойност (например 101), която може да се използва от JavaScript или бекенд логика.

Основни особености:

• <data> е inline елемент по подразбиране.
• Съдържа текст или други inline елементи, които са видими за потребителя.
• Атрибутът value съдържа машинно-четимата стойност (низ, число, код и др.).
• Подходящ е за структурирани данни в комбинация със скриптове, вместо да се разчита на data-* атрибути в други тагове.

Примерна употреба:

• Списък с продукти, където value е вътрешен ID или SKU.
• Списък с градове, където value е код на летище или пощенски код.
• Показване на текстови етикети, свързани с числови стойности за по-лесна обработка от скриптове.

Въпреки че често може да се постигне подобен ефект с data-* атрибути, <data> дава по-семантичен начин да се обозначи, че даден текст е свързан с конкретна стойност, което подобрява достъпността и машинната обработка.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути