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

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

• Да се съхраняват малки части от данни, свързани с елемента: Например, идентификатор на продукта, статус на елемента, настройки на widget.
• Да се улесни достъпът и манипулацията на данните чрез JavaScript: Данните могат лесно да се получават чрез element.dataset и да се променят.

// Получаване на данни
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Получаване на стойността на data-element-id

// Задаване на данни
myElement.dataset.status = 'active'; // Задаване на стойността на data-status

• Да се избягват несемантични класове: Използването на класове за съхраняване на данни (например, .status-active) може да направи структурата по-малко четлива и по-трудна за поддръжка.
• Да се подобри производителността в някои сценарии: Достъпът до данните чрез dataset може да бъде по-бърз, отколкото парсиране на стрингови атрибути или работа със скрити елементи.
• Да се използват тези данни в CSS селектори:

/* Избиране на елементи с определен статус */
[data-status="active"] {
  border: 1px solid green;
}

Важно е да се използват data-* атрибути за данни, които нямат друго подходящо семантично HTML атрибут. За данни, които трябва да бъдат достъпни за търсачки или други парсери, трябва да се използват съответните семантични елементи и атрибути.