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

Atrybuty data-* w HTML są zalecane do przechowywania niestandardowych danych, które nie mają wizualnej reprezentacji, bezpośrednio wewnątrz elementów DOM. Pozwala to:

• Przechowywać małe porcje danych związanych z elementem: Na przykład identyfikator produktu, status elementu, ustawienia widżetu.
• Ułatwić dostęp i manipulację danymi za pomocą JavaScript: Dane można łatwo pobrać za pomocą element.dataset i zmienić.

// Pobieranie danych
const mójElement = document.getElementById('mój-element');
const idElementu = mójElement.dataset.elementId; // Pobierz wartość atrybutu data-element-id

// Ustawianie danych
mójElement.dataset.status = 'active'; // Ustaw wartość atrybutu data-status

• Unikać niesemantycznych klas: Używanie klas do przechowywania danych (np. .status-active) może sprawić, że kod będzie mniej czytelny i trudniejszy do utrzymania.
• Poprawić wydajność w niektórych scenariuszach: Dostęp do danych przez dataset może być szybszy niż parsowanie atrybutów tekstowych lub praca z ukrytymi elementami.
• Używać tych danych w selektorach CSS:

/* Wybierz elementy z określonym statusem */
[data-status="active"] {
  border: 1px solid green;
}

Ważne jest, aby używać atrybutów data-* dla danych, które nie mają innego odpowiedniego atrybutu semantycznego HTML. Dla danych, które mają być dostępne dla wyszukiwarek lub innych parserów, należy używać odpowiednich elementów i atrybutów semantycznych.