W dzisiejszym świecie web developmentu, gdzie struktura treści ma ogromne znaczenie dla dostępności, SEO i czytelności, tag <dd> zasługuje na szczególną uwagę. Ten prosty, ale potężny element HTML służy do definiowania opisów, definicji lub wartości powiązanych z terminami w ramach listy definicji (<dl>). W połączeniu z tagiem <dt> (termin definicji) tworzy pary pytanie–odpowiedź, idealne do glosariuszy, słowników, dokumentacji technicznej czy FAQ.
Element <dd> nie działa samodzielnie – zawsze występuje wewnątrz kontenera <dl>, po elemencie <dt> lub innym <dd>. Dzięki temu przeglądarki automatycznie nadają mu wcięcie, co poprawia wizualną hierarchię. W tym wpisie przyjrzymy się <dd> od podstaw: składni, przykładom, stylowaniu CSS, interakcjom JavaScript, semantyce, najczęstszym błędom i praktycznym zastosowaniom.
Czym dokładnie jest tag <dd>? Podstawy i specyfikacja HTML5
Tag <dd> (często interpretowany jako description details) reprezentuje definicję, opis lub wartość powiązaną z terminem z poprzedzającego go <dt> w liście definicji. Według specyfikacji HTML5 obsługuje on elementy treści ogólnej jako potomne oraz atrybuty globalne (np. id, class, style) i zdarzeniowe (np. onclick).
Oto kluczowe cechy elementu <dd>:
- element nadrzędny – tylko
<dl>lub<div>znajdujący się wewnątrz<dl>; - zamykanie tagu – opcjonalne; jeśli po
<dd>następuje kolejny<dd>,<dt>lub koniec rodzica, tag zamykający można pominąć; - interfejs DOM –
HTMLElement, co ułatwia manipulację w JavaScript; - domyślny styl przeglądarek – wcięcie w prawo (ok. 40 px), bez markerów jak w
<ul>czy<ol>.
W odróżnieniu od zwykłych list, <dl> z <dt> i <dd> jest semantycznie bogatszy – jasno komunikuje pary „termin–opis”, co pomaga czytnikom ekranu i robotom Google.
Podstawowy przykład użycia <dd> w HTML
Poniżej znajdziesz klasyczny przykład listy definicji z tagiem <dd>. Skopiuj kod i przetestuj w edytorze HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład listy definicji z <dd></title>
</head>
<body>
<dl>
<dt>Czym jest <strong>HTML</strong>?</dt>
<dd><strong>HTML</strong> to język znaczników do tworzenia struktury stron internetowych.</dd>
<dt>Czym jest <strong>CSS</strong>?</dt>
<dd><strong>CSS</strong> (Cascading Style Sheets) służy do stylizacji i układu elementów HTML.</dd>
<dt>Czym jest <strong>JavaScript</strong>?</dt>
<dd><strong>JavaScript</strong> to język skryptowy do dodawania interaktywności na stronach WWW.</dd>
</dl>
</body>
</html>
Rezultat w przeglądarce:
Czym jest HTML?
HTML to język znaczników do tworzenia struktury stron internetowych.
Czym jest CSS?
CSS (Cascading Style Sheets) służy do stylizacji i układu elementów HTML.
Czym jest JavaScript?
JavaScript to język skryptowy do dodawania interaktywności na stronach WWW.
Zwróć uwagę: jeden <dt> może mieć wiele <dd> (np. synonimy lub różne znaczenia terminu), a wiele <dt> może dzielić jedno <dd>.
Zaawansowane przykłady – wiele definicji i elastyczna struktura
Tag <dd> błyszczy w złożonych scenariuszach. Oto przykład glosariusza programistycznego z wieloma opisami dla jednego terminu oraz z kilkoma terminami dla jednego opisu:
<dl>
<dt>Zamek</dt>
<dd>Urządzenie do zamykania drzwi za pomocą klucza.</dd>
<dd>Zapięcie wszywane do odzieży.</dd>
<dd>Warowna budowla mieszkalna ze średniowiecza.</dd>
<dt>Auto</dt>
<dt>Samochód</dt>
<dd>Dwuśladowy pojazd mechaniczny napędzany silnikiem spalinowym lub elektrycznym.</dd>
</dl>
To pokazuje elastyczność: jeden termin – wiele opisów oraz wiele synonimów – jeden opis.
Stylowanie <dd> za pomocą CSS – niestandardowe listy definicji
Domyślne wcięcie to za mało? Użyj CSS, by stworzyć eleganckie, responsywne listy.
1. Niestandardowe wcięcie i kolory
Przykładowy styl minimalny z wyróżnieniem terminów i pionowym akcentem przy opisach:
dl {
max-width: 600px;
margin: 20px 0;
}
dt {
font-weight: bold;
color: #007bff;
margin-top: 15px;
}
dd {
margin-left: 20px; /* mniejsze wcięcie */
color: #666;
padding: 5px 0;
border-left: 3px solid #007bff;
padding-left: 15px;
}
2. Responsywna lista na urządzeniach mobilnych (układ siatki)
Dodaj reguły media queries, aby poprawić czytelność na wąskich ekranach:
@media (max-width: 768px) {
dt, dd {
margin-left: 0;
padding-left: 0;
}
dd {
border-left: none;
border-top: 1px solid #eee;
padding-top: 10px;
}
}
Pełny przykład HTML + CSS – wklej CSS do znacznika <style>, a następnie użyj przedstawionej struktury listy:
<style>
/* Wklej powyższy CSS tutaj */
</style>
<dl>
<!-- Wklej przykład z "Zamek" i "Auto" -->
</dl>
Interaktywność z JavaScript – dynamiczne listy definicji
Połącz <dd> z JavaScript, aby tworzyć lekkie, rozwijane FAQ bez bibliotek. Poniżej prosty skrypt, który ukrywa/pokazuje definicje po kliknięciu w <dt>:
<dl id="faq">
<dt onclick="toggleDD(this)">Czym jest HTML?</dt>
<dd>HTML to język znaczników...</dd>
<!-- Więcej par dt/dd -->
</dl>
<script>
function toggleDD(dtElement) {
const dd = dtElement.nextElementSibling;
if (dd && dd.tagName === 'DD') {
dd.style.display = dd.style.display === 'none' ? 'block' : 'none';
}
}
</script>
Wskazówka: użyj document.querySelectorAll('dd'), aby domyślnie ukryć opisy przy starcie strony i odsłaniać je dopiero po kliknięciu – to poprawia UX sekcji pomocy.
Typowe błędy i dobre praktyki z <dd>
Unikaj poniższych potknięć i stosuj sprawdzone rozwiązania:
- błąd – tekst poza
<dt>/<dd>w<dl>; nieprawidłowe:<dl> Wstęp... <dt>Termin</dt> <dd>Opis</dd></dl>; - błąd – elementy blokowe w
<dt>(np.<div>wewnątrz<dt>); - dobra praktyka – używaj
<dfn>wewnątrz<dt>dla kluczowych terminów (semantyka); - SEO – listy
<dl>poprawiają indeksowanie glosariuszy; Google lubi strukturyzowane dane; - dostępność – czytniki ekranu jasno ogłaszają strukturę definicji, co ułatwia nawigację osobom niewidomym.
Praktyczne zastosowania <dd> w projektach webowych
Poniżej zestawienie typowych zastosowań i korzyści z użycia list definicji:
| Zastosowanie | Przykład | Korzyści |
|---|---|---|
| Glosariusz terminów | Słownik HTML/CSS na blogu | Semantyka i czytelność |
| Dokumentacja API | Opisy parametrów funkcji | Jasna struktura techniczna |
| FAQ accordion | Rozwijane odpowiedzi | Interaktywność z JS |
| Specyfikacje produktów | Cechy i opisy | Lepszy UX w e‑commerce |
| Materiały edukacyjne | Lekcje programowania | Łatwiejsza nauka |
W projektach takich jak strona docelowa lub blog programistyczny, <dd> często zastępuje rozbudowane tabele prostszą, bardziej semantyczną składnią.
Dlaczego <dd> wciąż ma sens w 2026 roku?
Mimo popularności frameworków (np. React), natywny HTML z <dd> zapewnia najlepszą semantykę i wydajność renderowania. W erze AI oraz wyszukiwania głosowego poprawna struktura definicji zyskuje na znaczeniu.
Testuj w Lighthouse i podobnych narzędziach – listy definicji regularnie podnoszą wynik Accessibility.
Eksperymentuj z powyższymi przykładami, dodaj własne CSS/JS i dopasuj styl do projektu.