За какво се използват атрибутите data в HTML?

Атрибутите data-* се използват за съхраняване на потребителски данни, които нямат визуално представяне, директно в HTML елементите.

Основните цели на използването:

• Достъп до данни чрез JavaScript/CSS: Позволяват лесно получаване и манипулиране на данните на елемента чрез JavaScript (element.dataset) или използването им в CSS селектори ([data-attribute="value"]).
• Съхранение на метаинформация: Удобно за съхраняване на допълнителна информация, свързана с елемента (например, ID на продукта, тип на потребителя, състояние).
• Създаване на персонализирани компоненти: Могат да се използват за определяне на поведението или свойствата на персонализирани компоненти, реализирани с JavaScript.
• Подобряване на семантиката: Могат да добавят определено ниво на семантика, описвайки специфични данни, свързани с съдържанието.

Пример за използване в HTML:

<div data-product-id="123" data-category="electronics">
  Смартфон
</div>

Достъп чрез JavaScript:

// Получаване на елемента
const productElement = document.querySelector('div');

// Достъп до data атрибутите
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Използване в CSS:

/* Стил за елементи с data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}