<data>
Łączy czytelną treść z wartością dla maszyn, na przykład nazwę produktu z jego kodem.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<p>Nasze kursy:</p>
<ul>
<li><data value="HTML-101">Kurs HTML i CSS od podstaw</data></li>
<li><data value="JS-201">JavaScript dla początkujących</data></li>
<li><data value="PY-101">Python od zera</data></li>
</ul>Definicja i zastosowanie
#Element <data> wiąże treść widoczną dla ludzi z wartością dla programów, zapisaną w atrybucie value. Użytkownik widzi „Kurs JavaScript”, a skrypt odczyta identyfikator JS-201. Użytkownik widzi „1 299,00 zł”, a skrypt dostaje liczbę 1299.
Taka wartość przydaje się przy sortowaniu, filtrowaniu i liczeniu: nie trzeba wyłuskiwać liczby z tekstu pełnego spacji, przecinków i symboli walut. W JavaScripcie odczytasz ją przez właściwość value elementu.
Do dat i godzin służy osobny element, <time>. Jeśli natomiast wartość jest potrzebna wyłącznie Twoim skryptom i nie wiąże się z konkretnym fragmentem treści, wygodniejsze mogą być atrybuty data-*.
Składnia
#<data value="wartość-dla-maszyn">treść dla ludzi</data>Atrybuty
#tekst lub liczba
Wartość dla maszyn, wymagana. Liczby zapisuj z kropką jako separatorem dziesiętnym i bez spacji, niezależnie od tego, jak wyglądają w widocznej treści.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#value
tekst lub liczbaWartość dla maszyn, wymagana. Liczby zapisuj z kropką jako separatorem dziesiętnym i bez spacji, niezależnie od tego, jak wyglądają w widocznej treści.
<p>Ocena kursu: <data value="4.5">★★★★½</data></p>Więcej przykładów
#<ul id="cart">
<li>Kurs HTML i CSS: <data value="149">149,00 zł</data></li>
<li>Kurs JavaScript: <data value="199.5">199,50 zł</data></li>
</ul>
<p>Razem: <strong id="total"></strong></p>
<script>
let sum = 0;
document.querySelectorAll('#cart data').forEach((item) => {
sum += Number(item.value);
});
document.getElementById('total').textContent = sum.toFixed(2).replace('.', ',') + ' zł';
</script>Skrypt nie musi rozbierać tekstu „199,50 zł”. Bierze gotowe liczby z atrybutu value i wpisuje sumę 348,50 zł.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Daty i godziny zapisuj w
<time>, a nie w<data>. - Trzymaj jeden format wartości w całym serwisie, np. ceny zawsze w złotych z kropką dziesiętną.
- Jeśli dane są potrzebne wyłącznie skryptom, rozważ atrybuty
data-*.
Powiązane hasła
#- <time>Data, godzina lub czas trwania zapisane czytelnie dla ludzi i jednocześnie zrozumiale dla maszyn.
- <span>Uniwersalny kontener liniowy bez znaczenia, do stylowania fragmentu tekstu.
- <abbr>Skrót lub akronim, z opcjonalnym rozwinięciem w atrybucie title.
- <meter>Wskaźnik wartości w znanym zakresie: zajęte miejsce, wynik testu, poziom baterii.
Widzisz błąd albo brakuje przykładu? Napisz do nas.