Poznaj Programowanie

Tagi HTML: dt

Piotr Grochal 8 min. czytania

Tag <dt> (skrót od definition term) to fundamentalny element HTML służący do definiowania terminu lub pojęcia w liście opisowej tworzonej przez element <dl>. Reprezentuje nazwę zagadnienia, do którego odnosi się opis w elemencie <dd>. Świetnie sprawdza się w słownikach, glosariuszach, FAQ oraz strukturach prezentujących pary „termin – definicja”.

Czym dokładnie jest tag <dt> i do czego służy?

Element <dt> tworzy etykietę/hasło w liście definicyjnej. Zawsze musi występować wewnątrz kontenera <dl>, tworząc parę z <dd>, które zawiera wyjaśnienie. Przykład: w słowniku programistycznym <dt> może oznaczać „HTML”, a <dd> – „HyperText Markup Language – język znaczników do tworzenia stron internetowych”.

Najczęstsze zastosowania obejmują:

  • słowniki i glosariusze terminów technicznych (np. pojęcia html/css/js),
  • faq na stronach internetowych,
  • listy atrybutów i ich opisów,
  • indeksy pojęć w dokumentacji api,
  • dowolne struktury „klucz–wartość”, jak parametry konfiguracji czy metadane.

W odróżnieniu od <ul> i <ol>, kombinacja <dt> + <dd> tworzy semantyczną listę definicyjną, co poprawia dostępność i zrozumiałość dla czytników ekranu.

Kontekst użycia – gdzie i jak umieszczać <dt>?

Tag <dt> ma ścisłe reguły umieszczenia zgodne ze standardem HTML. W praktyce możesz osadzić go w dwóch kontekstach:

  • podstawowy – bezpośrednio jako dziecko elementu <dl>;
  • rozszerzony – jako dziecko elementu <div>, ale tylko jeśli ten <div> jest bezpośrednim potomkiem <dl>; pozwala to na grupowanie definicji.

Przykład grupowania za pomocą <div>:

<dl>
<div>
<dt>Jeden z kolorów nieba?</dt>
<dd>Niebieski</dd>
</div>
<div>
<dt>Kolor cytryny</dt>
<dt>Kolor słońca</dt>
<dd>Żółty</dd>
</div>
</dl>

Powyższy kod jest poprawny, ponieważ każde <dt> występuje przed odpowiadającym mu <dd> wewnątrz tej samej grupy.

Nieprawidłowe użycie (poza <dl>):

<!-- BŁĄD: <dt> bez <dl> -->
<dt>HTML</dt>
<dd>Język znaczników</dd>

Elementy potomne (kontekst wewnętrzny)

<dt> akceptuje wyłącznie zawartość frazową (phrasing content). Nie można w nim umieszczać elementów blokowych.

Przykładowe elementy blokowe, których nie należy używać wewnątrz <dt>:

  • <header>,
  • <footer>,
  • <section>,
  • <article>,
  • <h1>–<h6>.

Poprawny przykład z elementami inline:

<dl>
<dt>
<dfn>HyperText Markup Language</dfn>
<img src="logo-html.png" alt="Logo HTML5" width="32" height="32">
</dt>
<dd>Język służący do budowy stron internetowych.</dd>
</dl>

Nieprawidłowe (zawiera element blokowy):

<dl>
<dt>
<h3>BŁĄD: Nagłówek blokowy</h3>
</dt>
<dd>Opis</dd>
</dl>

Składnia i pomijanie tagów

Pełna składnia: <dt>treść</dt>.

Pominięcie tagu zamykającego: dozwolone, jeśli bezpośrednio po <dt> pojawia się kolejny <dt> lub <dd>; przeglądarka domknie element automatycznie.

Przykład z pominiętym </dt>:

<dl>
<dt>HTML
<dt>CSS
<dd>HyperText Markup Language – język znaczników.
<dd>Cascading Style Sheets – arkusze stylów.
</dl>

Efekt: dwa terminy współdzielą jeden opis.

Atrybuty

<dt> nie ma obowiązkowych atrybutów. Obsługuje globalne atrybuty HTML (np. id, class, title, data-*), ale nie posiada atrybutów specyficznych, jak <a> czy <img>.

Przykłady praktyczne użycia w projektach webowych

1. Prosty słownik pojęć HTML/CSS/JS

<dl>
<dt><abbr title="HyperText Markup Language">HTML</abbr></dt>
<dd>Język znaczników do strukturyzowania treści stron internetowych.</dd>

<dt><abbr title="Cascading Style Sheets">CSS</abbr></dt>
<dd>Arkusze stylów do formatowania i układu elementów HTML.</dd>

<dt>JavaScript</dt>
<dd>Język skryptowy dodający interaktywność do stron WWW.</dd>
</dl>

Domyślny efekt wizualny: terminy są pogrubione lub wyświetlane w nowej linii, a opisy wcięte.

2. FAQ z wieloma terminami na jeden opis

<dl>
<dt>Co to jest responsywność?</dt>
<dt>RWD (Responsive Web Design)</dt>
<dd>Technika projektowania stron dostosowujących się do różnych rozmiarów ekranów (mobile-first).</dd>

<dt>Flexbox</dt>
<dd>Moduł CSS do układów elastycznych (flexible box layout).</dd>
</dl>

To rozwiązanie idealnie grupuje synonimy lub powiązane hasła pod jednym opisem.

3. Zaawansowany glosariusz z odsyłaczami i stylami

<!DOCTYPE html>
<html lang="pl">
<head>
<style>
dl { max-width: 600px; margin: 2em 0; }
dt { font-weight: bold; color: #0066cc; margin-top: 1em; }
dd { margin-left: 2em; margin-bottom: 1em; }
dt::after { content: ": "; }
</style>
</head>
<body>
<h1>Glosariusz web developmentu</h1>

<dl>
<dt><a href="#html">HTML5</a></dt>
<dd>Najnowszy standard języka znaczników z elementami semantycznymi jak <code>&lt;article&gt;</code> i <code>&lt;section&gt;</code>.</dd>

<dt id="flexbox">Flexbox</dt>
<dd>CSS Flexbox Layout – system dla jednowymiarowych układów z właściwościami jak <code>justify-content</code>.</dd>

<dt><code>async</code> / <code>defer</code></dt>
<dd>Atrybuty tagu <code>&lt;script&gt;</code> do asynchronicznego ładowania JS bez blokowania DOM.</dd>
</dl>
</body>
</html>

Ten przykład pokazuje integrację z CSS (np. display: block dla <dt>) oraz nawigację z użyciem linków.

4. Błędne przykłady i jak je naprawić

Poniżej znajdziesz typowe pułapki oraz szybkie poprawki:

  • Błąd – tekst poza <dt>/<dd>: <dl> Wstęp... <dt>Termin</dt> <dd>Opis</dd> </dl>;
  • Naprawa – przenieś wszelką treść pomocniczą do <dt> lub <dd>, ewentualnie poza <dl> jako osobny akapit;
  • Błąd – elementy blokowe w <dt>; użyj elementów inline (np. <strong>, <a>, <img>) zamiast <div> lub nagłówków.

Stylizacja <dt> za pomocą CSS

Domyślnie <dt> ma display: block. Oto przykładowe style dla czytelnego glosariusza:

dt {
display: block;
font-weight: bold;
background: linear-gradient(to right, #f0f8ff, #e6f3ff);
padding: 0.5em;
border-left: 4px solid #007bff;
margin: 0.5em 0 0.25em 0;
}
dd {
margin-left: 2em;
color: #555;
}

Efekt: nowoczesny, kontrastowy układ, który ułatwia szybkie skanowanie haseł i definicji.

Dostępność i najlepsze praktyki (accessibility i SEO)

Stosuj te wskazówki, aby poprawić UX, a także widoczność w wyszukiwarkach:

  • semantyka – używaj <dt>/<dd> zamiast <ul> dla definicji; ułatwia to pracę czytnikom ekranu (NVDA, VoiceOver);
  • seo – <dl> może wzmacniać topical authority poprzez klarowną strukturę „pojęcie–definicja”;
  • wielojęzyczność – dodaj lang="pl" do elementu <html> w dokumentach po polsku;
  • responsywność – w CSS używaj reguł @media dla mniejszych ekranów (np. dt { font-size: 1.1em; });
  • częste błędy – brak <dl>, użycie bloków w <dt>, pomijanie atrybutu alt w obrazkach wewnątrz <dt>.

Tag <dt> to prosty, a jednocześnie wyjątkowo skuteczny sposób na budowanie czytelnych, semantycznych list – idealny dla glosariuszy, FAQ i dokumentacji technicznej.