Listy definicji (<dl>)

Lekcja 4.4: Listy definicji (<dl>)

Strona główna > Rozdział 4: Listy > Listy definicji (<dl>)

Czym jest lista definicji?

Lista definicji (lub lista opisowa) w HTML służy do prezentowania zbioru terminów i ich odpowiadających definicji lub opisów. Jest to trzeci główny typ listy w HTML, obok list nienumerowanych (<ul>) i numerowanych (<ol>).

Listy definicji tworzy się za pomocą trzech znaczników:

<dl> (definition list): Otacza całą listę definicji.
<dt> (definition term): Oznacza termin, który jest definiowany.
<dd> (definition description): Zawiera definicję lub opis terminu oznaczonego przez poprzedzający <dt>.

Podstawowa struktura listy <dl>

Oto podstawowa struktura listy definicji:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - język znaczników używany do tworzenia struktury stron internetowych.</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - język stylów używany do opisu wyglądu i formatowania dokumentów HTML.</dd>
    
    <dt>JavaScript</dt>
    <dd>Język programowania używany do dodawania interaktywności i dynamicznych efektów na stronach internetowych.</dd>
</dl>

HTML: HyperText Markup Language - język znaczników używany do tworzenia struktury stron internetowych.
CSS: Cascading Style Sheets - język stylów używany do opisu wyglądu i formatowania dokumentów HTML.
JavaScript: Język programowania używany do dodawania interaktywności i dynamicznych efektów na stronach internetowych.

Przeglądarki zazwyczaj domyślnie renderują treść znacznika <dd> z wcięciem.

Zastosowania list definicji

Listy definicji są idealne do prezentowania informacji w formacie "termin-opis":

Słowniki pojęć i glosariusze
Sekcje FAQ (Pytanie - Odpowiedź)
Listy metadanych (np. autor, data publikacji)
Prezentacja dialogów (mówca - wypowiedź)
Opisy produktów z ich cechami

Wiele terminów lub wiele definicji

Lista definicji pozwala na elastyczne struktury:

Jeden termin, wiele definicji:

<dl>
    <dt>Lista</dt>
    <dd>Zbiór elementów uporządkowanych lub nieuporządkowanych.</dd>
    <dd>W programowaniu: struktura danych przechowująca kolekcję elementów.</dd>
</dl>

Lista: Zbiór elementów uporządkowanych lub nieuporządkowanych.; W programowaniu: struktura danych przechowująca kolekcję elementów.

Wiele terminów, jedna definicja:

<dl>
    <dt>HTML</dt>
    <dt>XHTML</dt>
    <dd>Języki znaczników używane do tworzenia stron internetowych.</dd>
</dl>

HTML
XHTML: Języki znaczników używane do tworzenia stron internetowych.

Stylizacja list definicji za pomocą CSS

Domyślny wygląd list definicji można modyfikować za pomocą CSS. Można zmieniać wcięcia, marginesy, czcionki, a nawet układać terminy i definicje obok siebie.

dl {
    margin-bottom: 20px;
}

dt {
    font-weight: bold;
    float: left; /* Układa termin po lewej */
    width: 100px; /* Szerokość dla terminu */
    clear: left;
    margin-right: 10px;
}

dd {
    margin-left: 110px; /* Wcięcie dla definicji, aby nie nachodziła na termin */
    margin-bottom: 10px;
}

Powyższy CSS stworzy układ, w którym termin znajduje się po lewej stronie, a definicja po prawej.

Zagnieżdżanie list definicji

Listy definicji można zagnieżdżać, umieszczając całą listę <dl> wewnątrz znacznika <dd>.

<dl>
    <dt>Języki Webowe</dt>
    <dd>Technologie używane do tworzenia stron internetowych.
        <dl>
            <dt>Frontend</dt>
            <dd>HTML, CSS, JavaScript</dd>
            <dt>Backend</dt>
            <dd>PHP, Python, Node.js</dd>
        </dl>
    </dd>
</dl>

Języki Webowe

Technologie używane do tworzenia stron internetowych.

Frontend: HTML, CSS, JavaScript
Backend: PHP, Python, Node.js

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz listę definicji dla kilku podstawowych kolorów w systemie RGB.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kolory RGB</title>
    <style>
        dt {
            font-weight: bold;
            color: #333;
        }
        dd {
            margin-left: 20px;
            margin-bottom: 10px;
            color: #555;
        }
    </style>
</head>
<body>
    <h1>Podstawowe kolory RGB</h1>
    
    <dl>
        <dt>Czerwony (Red)</dt>
        <dd>Składowa R: 255, G: 0, B: 0. Kod hex: #FF0000</dd>
        
        <dt>Zielony (Green)</dt>
        <dd>Składowa R: 0, G: 255, B: 0. Kod hex: #00FF00</dd>
        
        <dt>Niebieski (Blue)</dt>
        <dd>Składowa R: 0, G: 0, B: 255. Kod hex: #0000FF</dd>
        
        <dt>Biały (White)</dt>
        <dd>Składowa R: 255, G: 255, B: 255. Kod hex: #FFFFFF</dd>
        
        <dt>Czarny (Black)</dt>
        <dd>Składowa R: 0, G: 0, B: 0. Kod hex: #000000</dd>
    </dl>
</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Stwórz sekcję FAQ (Najczęściej Zadawane Pytania) używając listy definicji.
Stwórz listę definicji opisującą kilka postaci z ulubionej książki lub filmu.
Zastosuj style CSS, aby ułożyć terminy i definicje obok siebie w dwóch kolumnach.
Zagnieźdź listę definicji wewnątrz innej listy definicji.

Najczęściej zadawane pytania

Do czego służy lista definicji (<dl>)?

Lista definicji (<dl>) służy do prezentowania par terminów (<dt>) i ich odpowiadających definicji lub opisów (<dd>). Jest idealna do słowników, glosariuszy, sekcji FAQ czy prezentacji metadanych.

Jaka jest różnica między <dt> a <dd>?

Znacznik <dt> (definition term) oznacza termin, który jest definiowany. Znacznik <dd> (definition description) zawiera definicję lub opis tego terminu. Wewnątrz <dl> zazwyczaj występuje jedna lub więcej par <dt> i <dd>.

Czy jeden termin może mieć wiele definicji?

Tak, po jednym znaczniku <dt> może następować wiele znaczników <dd>, jeśli dany termin ma kilka różnych definicji lub opisów, które chcemy przedstawić oddzielnie.

Czy jedna definicja może dotyczyć wielu terminów?

Tak, przed jednym znacznikiem <dd> może występować wiele znaczników <dt>, jeśli kilka różnych terminów ma tę samą definicję lub opis.

Jak stylizować listy definicji?

Listy definicji można stylizować za pomocą CSS, modyfikując wygląd znaczników <dl>, <dt> i <dd>. Można zmieniać czcionki, kolory, marginesy, wcięcia, a nawet układać terminy i opisy w kolumnach.