Do czego służą atrybuty data w HTML?

Atrybuty data-* służą do przechowywania niestandardowych danych, które nie mają wizualnej reprezentacji, bezpośrednio w elementach HTML.

Główne cele użycia:

• Dostęp do danych przez JavaScript/CSS: Umożliwiają łatwe pobieranie i manipulowanie danymi elementu za pomocą JavaScript (element.dataset) lub używanie ich w selektorach CSS ([data-attribute="value"]).
• Przechowywanie metainformacji: Przydatne do przechowywania dodatkowych informacji związanych z elementem (np. ID produktu, typ użytkownika, stan).
• Tworzenie niestandardowych komponentów: Mogą służyć do określenia zachowania lub właściwości własnych komponentów, zaimplementowanych za pomocą JavaScript.
• Poprawa semantyki: Mogą dodawać pewien poziom semantyki, opisując specyficzne dane powiązane z treścią.

Przykład użycia w HTML:

<div data-product-id="123" data-category="electronics">
  Smartfon
</div>

Dostęp przez JavaScript:

// Pobranie elementu
const productElement = document.querySelector('div');

// Dostęp do atrybutów data
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Użycie w CSS:

/* Styl dla elementów z data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}