Lista definicji w HTML

Lista definicji w HTML — co to jest?

Lista definicji w HTML to specjalny typ listy służący do prezentowania par termin — opis (definicja). Definiuje się ją znacznikiem <dl> (od ang. description list, dawniej definition list).

Wewnątrz listy używa się dwóch znaczników podstawowych:

• <dt> (definition term) — termin, nazwa pojęcia, hasło,
• <dd> (definition description) — opis, definicja lub wyjaśnienie terminu.

Lista definicji jest jedną z trzech głównych list w HTML — obok listy nienumerowanej <ul> i listy numerowanej <ol>. To częsty temat na egzaminie z kwalifikacji INF.03 (Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych).

Podstawowy przykład

<dl>
  <dt>HTML</dt>
  <dd>Język znaczników używany do tworzenia struktury strony internetowej.</dd>

  <dt>CSS</dt>
  <dd>Język służący do opisu wyglądu elementów HTML.</dd>

  <dt>JavaScript</dt>
  <dd>Język programowania nadający interaktywności stronom internetowym.</dd>
</dl>

W przeglądarce wygląda to mniej więcej tak:

HTML
   Język znaczników używany do tworzenia struktury strony internetowej.
CSS
   Język służący do opisu wyglądu elementów HTML.

Domyślnie przeglądarka wcina opis (<dd>) względem terminu (<dt>), nadając strukturze wizualnej hierarchii.

Znaczniki listy definicji

Jeden <dt> może mieć wiele <dd> (jeden termin, kilka opisów) lub odwrotnie — kilka <dt> z jednym wspólnym <dd> (kilka synonimów, jedna definicja).

<dl>
  <dt>WWW</dt>
  <dt>World Wide Web</dt>
  <dd>Globalna sieć dokumentów hipertekstowych dostępna przez Internet.</dd>
</dl>

Trzy rodzaje list w HTML

To kluczowe rozróżnienie egzaminacyjne — w pytaniach często trzeba wybrać właściwy znacznik:

Wewnątrz <ul> i <ol> elementy listy oznacza się znacznikiem <li> (list item).

W <dl> zamiast <li> używa się pary <dt> + <dd>.

Lista nienumerowana — <ul>

<ul>
  <li>Pierwsza pozycja</li>
  <li>Druga pozycja</li>
  <li>Trzecia pozycja</li>
</ul>

Renderuje się jako lista z kropkami (bulletami). Stosuje się ją, gdy kolejność elementów nie ma znaczenia.

Lista numerowana — <ol>

<ol>
  <li>Pierwsza pozycja</li>
  <li>Druga pozycja</li>
  <li>Trzecia pozycja</li>
</ol>

Renderuje się jako lista z numerami. Stosuje się ją, gdy kolejność ma znaczenie (np. kroki przepisu, instrukcja, ranking).

Atrybut type zmienia styl numerowania: 1 (domyślnie), A, a, I, i.

Lista definicji — <dl>

Trzecia, mniej znana, ale ważna w pytaniach egzaminacyjnych:

<dl>
  <dt>Termin</dt>
  <dd>Opis</dd>
</dl>

Kiedy stosować listę definicji?

Lista <dl> najlepiej sprawdza się w sytuacjach, gdy dane mają strukturę „hasło → wyjaśnienie":

• słowniczki pojęć (jak ten artykuł),
• lista parametrów technicznych i ich znaczeń,
• dane kontaktowe z opisami (telefon: 123…, e-mail: …),
• zestawienia właściwości produktu (waga: 5 kg, kolor: czarny),
• pytania i odpowiedzi (FAQ — termin = pytanie, opis = odpowiedź),
• metadane (data publikacji, autor, kategoria).

Nie używaj <dl>, gdy:

• chcesz wypunktowaną listę elementów → <ul>,
• chcesz uporządkowane kroki → <ol>,
• chcesz zwykły akapit → <p>.

Listy zagnieżdżone

Każdy typ listy można zagnieździć w innym — to częsta technika tworzenia menu, spisów treści i drzew.

<ul>
  <li>Owoce
    <ul>
      <li>Jabłka</li>
      <li>Gruszki</li>
    </ul>
  </li>
  <li>Warzywa
    <ul>
      <li>Marchew</li>
      <li>Pietruszka</li>
    </ul>
  </li>
</ul>

Można też zagnieździć listę numerowaną w nienumerowanej (albo <dl> w <li>) — HTML nie narzuca tu ograniczeń.

Stylowanie list (CSS)

Domyślny wygląd list można dowolnie zmienić w CSS:

/* Usuń kropki z listy nienumerowanej */
ul { list-style: none; }

/* Zmień numerowanie na rzymskie wielkie */
ol { list-style-type: upper-roman; }

/* Pogrub terminy w liście definicji */
dt { font-weight: bold; }

/* Usuń wcięcie z opisów */
dd { margin-left: 0; }

Typowe odpowiedzi egzaminacyjne

Najczęstsze pytania z list HTML i ich poprawne odpowiedzi:

Częste pomyłki — nie myl tego!

• <dl> ≠ <ul> ≠ <ol> — to trzy różne typy list: definicji, nienumerowana, numerowana.
• <li> nie jest używane w <dl> — w liście definicji są <dt> i <dd>.
• <dt> ≠ <dd> — <dt> to termin (hasło), <dd> to opis (definicja). Łatwo zapamiętać: t = term, d = description.
• <dl> nie oznacza data list — to description list (lub historycznie definition list). Znacznik <datalist> to zupełnie coś innego — używany w formularzach jako lista podpowiedzi do <input>.
• <dl> to nie tabela — choć wygląda na strukturę dwukolumnową, lista definicji semantycznie opisuje pary termin–opis, a nie tabelaryczne dane. Do tabel służy <table>.
• kolejność <dt> i <dd> ma znaczenie — najpierw zawsze idzie <dt> (termin), potem <dd> (opis). Odwrotnie nie zadziała semantycznie.
• „opisowy" znacznik to <dd>, nie <description> — taki znacznik w HTML nie istnieje.

Najważniejsze do zapamiętania

Lista definicji w HTML to <dl> — zawiera pary <dt> (termin) + <dd> (opis). Razem z <ul> (nienumerowana) i <ol> (numerowana, z elementami <li>) tworzą trzy podstawowe typy list w HTML. Lista definicji nadaje się do słowniczków, FAQ, parametrów i danych kontaktowych — wszędzie tam, gdzie struktura to hasło → wyjaśnienie.