0Pricing
HTML Academy · Lekcja

Listy opisów: dl, dt i dd

Oznaczać pary termin–definicja za pomocą list opisów.

Listy opisów: dl, dt i dd to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Czym jest lista opisowa?

Lista opisowa grupuje terminy wraz z ich opisami:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of the web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation of the web.</dd>

  <dt>JavaScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

Elementy dl, dt i dd

Na listę opisową składają się trzy elementy:

  • <dl> — kontener listy opisowej
  • <dt> — termin opisu (klucz)
  • <dd> — szczegóły opisu (wartość)

Wiele elementów dd dla jednego dt

Jeden termin może mieć wiele opisów:

<dl>
  <dt>HTML</dt>
  <dd>Stands for HyperText Markup Language.</dd>
  <dd>First published as HTML 2.0 in 1995.</dd>
  <dd>Current version: HTML5 (Living Standard).</dd>
</dl>

Wiele elementów dt dla jednego dd

Wiele terminów może współdzielić jeden opis (synonimy, aliasy):

<dl>
  <dt>Username</dt>
  <dt>Login</dt>
  <dt>Handle</dt>
  <dd>The unique identifier used to log in to your account.</dd>
</dl>

Przypadki zastosowań w praktyce

Listy opisowe doskonale nadają się do:

  • Glosariuszy i definicji
  • Sekcji FAQ (pytanie → odpowiedź)
  • Metadanych produktu (Autor: Jane, Opublikowano: 2024)
  • Szczegółów przepisu (Czas przygotowania: 10 min, Liczba porcji: 4)
  • Dokumentacji parametrów API

FAQ za pomocą dl

Zbuduj sekcję FAQ za pomocą list opisowych:

<dl class="faq">
  <dt>Is HTML a programming language?</dt>
  <dd>No. HTML is a markup language. It defines structure and meaning, not logic or computation.</dd>

  <dt>Do I need to close void elements?</dt>
  <dd>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not need a closing slash.</dd>
</dl>

dl dla metadanych

Wyświetl metadane artykułu lub produktu:

<article>
  <h1>Responsive Images Guide</h1>

  <dl class="metadata">
    <dt>Author</dt>
    <dd>Jane Smith</dd>

    <dt>Published</dt>
    <dd><time datetime="2024-03-15">March 15, 2024</time></dd>

    <dt>Reading time</dt>
    <dd>8 minutes</dd>
  </dl>
</article>

Stylowanie dl

Styluj listy opisowe za pomocą CSS:

/* Two-column layout */
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}

dt {
  font-weight: bold;
  color: #555;
}

dd {
  margin: 0;  /* Remove browser default dd margin */
}

Zagnieżdżanie dl

Listy opisowe można zagnieżdżać, aby tworzyć definicje hierarchiczne:

<dl>
  <dt>HTML Elements</dt>
  <dd>
    <dl>
      <dt>Block elements</dt>
      <dd>Take full width: div, p, h1-h6</dd>
      <dt>Inline elements</dt>
      <dd>Flow with text: span, a, strong</dd>
    </dl>
  </dd>
</dl>

dl a table dla danych klucz-wartość

Kiedy używać <dl>, a kiedy <table> dla danych klucz-wartość:

  • dl — powiązania między terminami a opisami (pary nazwa-wartość)
  • table — dane tabelaryczne z wierszami i kolumnami (wiele atrybutów dla każdego elementu)
<dl>
  <dt>Name</dt><dd>Jane</dd>
  <dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->

Elementy div wewnątrz dl

Umieszczanie grup dt/dd w elementach <div> wewnątrz <dl> jest prawidłowe w HTML5:

<dl>
  <div>
    <dt>HTML</dt>
    <dd>Markup language for web pages.</dd>
  </div>
  <div>
    <dt>CSS</dt>
    <dd>Styling language for web pages.</dd>
  </div>
</dl>
<!-- Useful for zebra-striping or grouping with CSS -->

Szybkie sprawdzenie

Jaki element zawiera definicję lub wartość w liście opisowej?

Podsumowanie: listy opisowe

Najważniejsze informacje o listach opisowych:

  • <dl> — kontener listy opisowej
  • <dt> — termin (klucz, pytanie, nazwa)
  • <dd> — opis (wartość, odpowiedź, definicja)
  • Jeden dt może mieć wiele dd, a wiele dt może współdzielić jeden dd
  • Doskonale nadają się do glosariuszy, sekcji FAQ i metadanych
  • Grupy można umieszczać w elementach <div>, aby uzyskać większą elastyczność stylowania

Często zadawane pytania

Czy lekcja „Listy opisów: dl, dt i dd” jest bezpłatna?

Tak — pełny tekst „Listy opisów: dl, dt i dd” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Listy opisów: dl, dt i dd”?

Oznaczać pary termin–definicja za pomocą list opisów. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Listy opisów: dl, dt i dd”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Listy nieuporządkowane: ul i li
  2. Listy uporządkowane: ol, start, reversed i type
  3. Listy opisów: dl, dt i dd
  4. Listy zagnieżdżone i stylowanie list
← Powrót do HTML Academy