Poznaj Programowanie

Tagi HTML: dl

Piotr Grochal 7 min. czytania

Element <dl> to jeden z fundamentalnych znaczników HTML służący do tworzenia list definicji (lista opisów). Reprezentuje on strukturę par nazwa–wartość, taką jak terminy i ich definicje, pytania i odpowiedzi, czy nazwy parametrów i ich opisy. W przeciwieństwie do zwykłych list <ul> lub <ol>, <dl> pozwala na bardziej semantyczne grupowanie powiązanych treści, co poprawia dostępność i czytelność strony.

<dl> zawsze współpracuje z elementami potomnymi: <dt> (termin definicji – termin lub nazwa) i <dd> (opis definicji – opis lub definicja). To trio tworzy elastyczną, czytelną i dostępną strukturę, idealną do słowników, FAQ, metadanych czy glosariuszy.

Podstawowa składnia i struktura elementu <dl>

Element <dl> wymaga zarówno otwierającego, jak i zamykającego tagu – ich pominięcie jest niedozwolone. Domyślne style CSS nadane przez przeglądarki to:

dl {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}

Wewnątrz <dl> mogą występować grupy elementów <dt> i <dd>, opcjonalnie zmieszane z <script>, <template> lub <div> (zawierającymi te grupy). Element jest zgodny z modelem treści HTML5 jako treść ogólna i wyczuwalna, pod warunkiem obecności co najmniej jednej pary <dt>–<dd>.

Prosty przykład podstawowej listy definicji:

<dl>
<dt>Czym jest HTML?</dt>
<dd>HTML (Hypertext Markup Language) to język znaczników do tworzenia struktury stron internetowych.</dd>

<dt>Czym jest CSS?</dt>
<dd>CSS (Cascading Style Sheets) służy do stylizacji elementów HTML.</dd>

<dt>Czym jest JavaScript?</dt>
<dd>JavaScript to język skryptowy dodający interaktywność do stron WWW.</dd>
</dl>

Wynikowo przeglądarka wyrenderuje pionową listę z wyróżnionymi terminami (<dt>) i wciętymi opisami (<dd>).

Zaawansowane struktury – wiele terminów i definicji

Jedna z największych zalet <dl> to elastyczność – jednemu terminowi może odpowiadać wiele definicji, a jednej definicji wiele terminów. To czyni go idealnym do złożonych relacji.

Przykład z wieloma terminami dla jednej definicji:

<dl>
<dt>HTML</dt>
<dt>Hypertext Markup Language</dt>
<dd>Język znaczników hipertekstowych do strukturyzowania treści internetowych.</dd>

<dt>Redundantny</dt>
<dd>Nadmiarowy i zbędny.</dd>
<dd>Zapasowy (w kontekście systemów).</dd>
</dl>

Tutaj „HTML” i jego pełna nazwa dzielą tę samą definicję, co semantycznie podkreśla ich synonimiczność.

Przykład z grupowaniem za pomocą <div> (nowoczesne podejście HTML5):

<main>
<dl>
<div>
<dt>Stolica Polski?</dt>
<dd>Warszawa.</dd>
</div>

<div>
<dt>Jeden z kolorów nieba?</dt>
<dd>Niebieski.</dd>
</div>

<div>
<dt>Jeden z owoców?</dt>
<dd>Czereśnia.</dd>
</div>
</dl>
</main>

Ta struktura pozwala na dodatkowe formatowanie grup (np. tła czy ramek dla każdej pary), zachowując semantykę. <div> musi zawierać co najmniej jedną parę <dt>–<dd>.

Kontekst użycia i reguły HTML5

Elementy nadrzędne i potomne

Najważniejsze reguły dotyczące otoczenia <dl> i jego dzieci wyglądają tak:

  • Nadrzędne – dowolne elementy treści ogólnej (np. <main>, <article>, <section>);
  • Potomne – grupy <dt> + <dd>, <div> zawierające takie grupy, a także <script> i <template>;
  • Nieprawidłowe użycie – umieszczanie tekstu bezpośrednio w <dl> poza parami <dt> i <dd> (np. <dl> Wstęp... <dt>Termin</dt> <dd>Opis</dd> </dl>) prowadzi do błędu walidacji.

Atrybuty

<dl> nie wymaga żadnych atrybutów, ale obsługuje globalne (np. id, class, data-*). Brak specyficznych atrybutów znanych z <ul> (type) czy <ol> (start).

Interfejs DOM

W JavaScript element dostępny jest jako HTMLDListElement. Przykładowy odczyt węzłów potomnych wygląda tak:

const dl = document.querySelector('dl');
console.log(dl.children); // lista grup dt/dd

Praktyczne zastosowania <dl> w projektach webowych

<dl> świetnie sprawdza się tam, gdzie naturalne są pary klucz–wartość, a semantyka ma znaczenie dla SEO i dostępności:

  1. FAQ (często zadawane pytania) – naturalnie odwzorowuje strukturę pytanie–odpowiedź. Przykład:

<section>
<h2>FAQ</h2>
<dl>
<dt>Jak zacząć z HTML?</dt>
<dd>Stwórz plik .html i użyj edytora jak VS Code.</dd>

<dt>Czy CSS jest obowiązkowy?</dt>
<dd>Nie, ale bez niego strona będzie nudna wizualnie.</dd>
</dl>
</section>

  1. Słowniki i glosariusze – idealne do terminów technicznych; czytniki ekranu odczytują je naturalnie jako „termin: opis”.
  2. Metadane i specyfikacje – np. parametry API. Przykład:

<dl>
<dt>method</dt>
<dd>GET, POST, PUT, DELETE.</dd>

<dt>headers</dt>
<dd>Authorization: Bearer token.</dd>
</dl>

  1. Produkty i specyfikacje (e‑commerce) – prezentacja cech w parach nazwa–wartość. Przykład:

<dl>
<dt>Procesor</dt>
<dd>Intel Core i7</dd>

<dt>Pamięć RAM</dt>
<dd>16 GB DDR4</dd>

<dt>Dysk</dt>
<dd>512 GB SSD</dd>
</dl>

Stylizacja <dl> za pomocą CSS

Domyślny wygląd jest prosty, ale CSS pozwala na dużą swobodę. Poniżej znajdziesz dwa popularne wzorce stylizacji:

Nowoczesny, poziomy layout (desktop):

dl {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
margin: 2rem 0;
}
dt {
font-weight: bold;
background: #f0f0f0;
padding: 0.5rem;
border-radius: 4px;
}
dd {
margin-left: 0;
padding: 0.5rem;
border-left: 3px solid #007bff;
}

Responsywny FAQ z animacjami:

dd {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
dt:hover + dd {
max-height: 200px;
}

Połącz z prostym skryptem JavaScript do przełączania widoczności odpowiedzi:

document.querySelectorAll('dt').forEach(dt => {
dt.addEventListener('click', () => {
const dd = dt.nextElementSibling;
dd.style.display = dd.style.display === 'block' ? 'none' : 'block';
});
});

Dostępność (a11y) i najlepsze praktyki

Stosując <dl>, warto trzymać się kilku zasad poprawiających UX, SEO i dostępność:

  • semantyka – używaj <dl> zamiast tabel do par klucz–wartość; czytniki ekranu radzą sobie z nimi lepiej;
  • walidacja – sprawdzaj dokument w walidatorze W3C, by uniknąć błędów struktury;
  • błędy do uniknięcia – brak pełnych par <dt>–<dd>, bezcelowe zagnieżdżenia i luźny tekst w <dl>;
  • alternatywy – do prostych list używaj <ul>, a do danych tabelarycznych wybieraj <table>.

Różnica między elementami:

Element Zastosowanie Przykład
<dt> Termin/nazwa <dt>HTML</dt>
<dd> Opis/definicja <dd>Język znaczników</dd>