Jak używać data-* do przechowywania danych

Jak używać data-* do przechowywania danych

Atrybuty data-* w HTML pozwalają dodawać własne, niestandardowe informacje do dowolnych znaczników. Są one niewidoczne dla użytkownika, ale dostępne dla JavaScriptu, dzięki czemu idealnie nadają się do przekazywania danych między strukturą HTML a logiką strony.

Co to jest data-*?

Atrybut data-* to specjalny sposób na umieszczanie dodatkowych danych w HTML. Składnia:

<element data-klucz="wartość">...</element>

Przykład:

<button data-product-id="1234">Dodaj do koszyka</button>

Dzięki temu, bez używania klasy lub ID, możesz przechowywać np. identyfikator produktu, status, nazwę kategorii itp.

Zasady nazywania data-*
  • Nazwa po data- musi składać się z liter, cyfr i myślników (np. data-user-role)
  • W JavaScript odczytujesz te dane przez dataset, zamieniając myślniki na camelCase (np. data-user-role → dataset.userRole)
Przykład 1: dane o produkcie
<div class="product" data-id="452" data-category="books" data-stock="low">
  <h3>Nowa książka</h3>
  <p>Dostępność: mało</p>
</div>

W tym komponencie przechowujemy: ID produktu, kategorię oraz status magazynowy – bez użycia klas czy dodatkowych atrybutów.

Przykład 2: dane w formularzu
<input type="text" name="kod" data-validation="required" data-error-msg="Wpisz kod promocyjny">

Tu atrybuty data-* mogą być użyte przez JavaScript do walidacji formularza – bez konieczności pisania warunków „na sztywno” w kodzie JS.

Przykład 3: lista z priorytetem
<li data-priority="1">Zadanie krytyczne</li>
<li data-priority="3">Zadanie niskiego priorytetu</li>

Na tej podstawie możesz sortować elementy, zmieniać kolory, animacje, style – wszystko na podstawie jednej dynamicznej wartości.

Dobre praktyki
  • Używaj data-* tylko do przechowywania danych logicznych – nie stylizacyjnych (np. NIE: data-color="red")
  • Nie przesadzaj z liczbą atrybutów – traktuj je jak API komponentu
  • Stosuj jednolite konwencje nazw: np. data-user-id, data-product-name
🔗 Przetestuj samodzielnie

Stwórz własną strukturę HTML z trzema elementami (np. przyciskami, wpisami na blogu, produktami) i dodaj do nich atrybuty data-*. Spróbuj opisać: ID, typ, status, priorytet itp. Przetestuj strukturę w JSFiddle.

💡 Wskazówka

data-* to most między HTML a JavaScriptem – traktuj to jak interfejs komponentu. Dzięki temu komponenty HTML mogą być dynamiczne, skalowalne i niezależne od logiki zapisanej w skryptach.

Previous Zagadnienie
Back to Zagadnienie
Next Temat