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

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

Основните предимства:

• Семантично коректни: Те са част от стандарта HTML5 и не нарушават валидността на документа.
• Лесен достъп: Достъпът до данните се осъществява чрез свойството dataset в JavaScript, което връща обект с ключове, съответстващи на частите на атрибута след data-.
• Удобство за JavaScript/CSS: Позволяват да се свържат определени данни с елементите, които след това могат да се използват в логиката на JavaScript или за стилизиране в CSS (чрез селектори по атрибути).
• Отделяне на данните от презентацията: Помагат да се раздели структурата на HTML от данните, които могат да се използват за поведение или представяне.

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

• Съхраняване на ID на запис в базата данни.
• Запазване на параметри за изскачащ прозорец или модален диалог.
• Определяне на състоянието на елемента (например, data-state="active").
• Прехвърляне на малки обеми данни от бекенда към фронтенда за използване в JavaScript.

Пример за достъп в JavaScript:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Достъп до стойността "123"
const category = element.dataset.category; // Достъп до стойността "electronics"