Do czego zaleca się używanie atrybutów data w HTML?

Atrybuty data-* służą do przechowywania dowolnych danych powiązanych z konkretnym elementem HTML, bez konieczności używania niestandardowych atrybutów lub właściwości DOM.

Główne zalety:

• Semantycznie poprawne: Są częścią standardu HTML5 i nie naruszają ważności dokumentu.
• Łatwy dostęp: Dostęp do danych odbywa się przez właściwość dataset w JavaScript, która zwraca obiekt z kluczami odpowiadającymi częściom atrybutu po data-.
• Wygodne dla JavaScript/CSS: Pozwalają powiązać określone dane z elementami, które następnie można wykorzystać w logice JavaScript lub do stylizacji w CSS (za pomocą selektorów atrybutów).
• Oddzielenie danych od prezentacji: Pomagają oddzielić strukturę HTML od danych, które mogą być użyte do zachowania lub prezentacji.

Przykłady użycia:

• Przechowywanie ID wpisu w bazie danych.
• Zapisywanie parametrów dla okna popup lub dialogu modalnego.
• Określenie stanu elementu (np. data-state="active").
• Przesyłanie niewielkich ilości danych z backendu do frontendu do wykorzystania w JavaScript.

Przykład dostępu w JavaScript:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Dostęp do wartości "123"
const category = element.dataset.category; // Dostęp do wartości "electronics"