HTML Academy · Lekcja

Własne atrybuty danych data-*

Przechowywać własne dane bezpośrednio w elementach za pomocą atrybutów data-*.

Własne atrybuty danych data-* to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Czym są atrybuty data-*?

Niestandardowe atrybuty danych umożliwiają przechowywanie dodatkowych informacji bezpośrednio w elementach HTML:

<button data-user-id="42" data-action="delete">Delete User</button>
<li data-category="frontend" data-level="beginner">HTML</li>

<!-- Format: data-[name]="value" -->
<!-- Any alphanumeric name after data- is valid -->
<!-- Values are always strings -->

Dlaczego istnieje data-*

Przed wprowadzeniem data-* programiści przechowywali dodatkowe dane w:

Ukrytych polach input (nieporęczne rozwiązanie)
Nazwach klas CSS (podatne na awarie)
Niestandardowych atrybutach, takich jak rel lub title (nieprawidłowy HTML)

HTML5 ustandaryzował data-* jako oficjalny sposób osadzania niestandardowych danych bez wpływania na semantykę ani sposób prezentacji.

Zasady nazewnictwa

Zasady nazewnictwa atrybutów data-*:

Nazwa musi zaczynać się od data-
Może zawierać małe litery, cyfry, łączniki, podkreślenia i kropki
Nazwa nie może zawierać wielkich liter (specyfikacja HTML zamienia je na małe)
Nazwa nie może zaczynać się od xml

<div data-user-id="1">OK</div>
<div data-product-category="tools">OK</div>
<!-- <div data-XML-thing="1">BAD: starts with xml -->
<!-- <div data-MyProp="1">BAD: uppercase in name -->

Odczytywanie data-* w JavaScript

Dostęp do niestandardowych danych uzyskuje się za pomocą właściwości dataset:

<button id="btn"
  data-user-id="42"
  data-action="delete"
  data-confirm-message="Are you sure?"
>
  Delete
</button>

<script>
const btn = document.getElementById('btn');
console.log(btn.dataset.userId);          // '42'
console.log(btn.dataset.action);          // 'delete'
console.log(btn.dataset.confirmMessage);  // 'Are you sure?'
// Note: data-user-id → dataset.userId (camelCase conversion)
</script>

Zapisywanie data-* za pomocą dataset

Atrybuty danych można ustawiać i usuwać za pomocą dataset:

const card = document.querySelector('.card');

// Set:
card.dataset.status = 'active';
// Now: <div class="card" data-status="active">

// Delete:
delete card.dataset.status;
// Now: data-status is removed

// Alternatively with setAttribute:
card.setAttribute('data-status', 'inactive');
card.removeAttribute('data-status');

Konwersja z łączników na camelCase

API dataset konwertuje nazwy rozdzielone łącznikami na zapis camelCase:

<!-- HTML attribute         JavaScript dataset property -->
data-user-id           →   dataset.userId
data-product-category  →   dataset.productCategory
data-max-retries       →   dataset.maxRetries
data-is-active         →   dataset.isActive

Selektory atrybutów CSS

Używaj atrybutów danych w selektorach CSS:

[data-status="active"] {
  color: green;
}

[data-status="inactive"] {
  color: gray;
  text-decoration: line-through;
}

/* Present but any value: */
[data-featured] {
  border: 2px solid gold;
}

Wzorzec etykiety narzędzia

Twórz etykiety narzędzi za pomocą samych atrybutów danych i CSS:

<span data-tooltip="This is a tooltip">Hover me</span>

/* CSS: */
/*
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);  /* attr() reads the attribute value */
  position: absolute;
  background: #333;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }
*/

Wzorzec śledzenia stanu

Śledź stan komponentu za pomocą atrybutów danych:

<button data-state="off" id="toggle">Toggle</button>

<script>
document.getElementById('toggle').addEventListener('click', function() {
  const state = this.dataset.state;
  this.dataset.state = state === 'off' ? 'on' : 'off';
  this.textContent = this.dataset.state === 'on' ? 'Active' : 'Toggle';
});
</script>

/* CSS: */
/* [data-state="on"] { background: green; color: white; } */

data-* a zmienne JavaScript

Kiedy używać data-*, a kiedy przechowywać dane w JavaScript:

Używaj data-* dla wartości, które bezpośrednio odpowiadają elementowi DOM i mogą być odczytywane przez CSS
Używaj zmiennych lub obiektów JavaScript dla złożonych struktur danych, które nie są powiązane z konkretnymi elementami
Nie przechowuj dużych ani poufnych danych w data-* — są widoczne w DevTools

data-* nie służy do prezentacji

Typowe błędy, których należy unikać:

<!-- BAD: storing presentation data in data-* -->
<div data-color="red" data-font-size="18">Text</div>
<!-- Use CSS classes instead: -->
<div class="text-danger text-lg">Text</div>

<!-- BAD: storing sensitive data -->
<div data-api-key="sk-123...">Content</div>
<!-- NEVER store secrets in HTML attributes -->

Szybkie sprawdzenie

W jaki sposób API dataset uzyskuje dostęp do atrybutu data-product-id?

Podsumowanie: atrybuty data-*

Najważniejsze informacje o niestandardowych atrybutach danych:

data-name="value" — przechowuje niestandardowe metadane w elementach
Dostęp za pomocą element.dataset.camelCase
Łączniki są konwertowane na zapis camelCase w API dataset
Używaj ich w CSS za pomocą selektorów [data-name="value"]
Nigdy nie przechowuj poufnych danych (kluczy, haseł) w atrybutach danych

Często zadawane pytania

Czy lekcja „Własne atrybuty danych data-*” jest bezpłatna?

Tak — pełny tekst „Własne atrybuty danych data-*” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Własne atrybuty danych data-*”?

Przechowywać własne dane bezpośrednio w elementach za pomocą atrybutów data-*. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Własne atrybuty danych data-*”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do HTML Academy