<dl>
Lista opisowa: pary nazwa i opis, na przykład słowniczek pojęć albo dane techniczne.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Grupy elementów
<dt>i<dd>, opcjonalnie owinięte w<div>
Przykład
#<dl>
<dt>HTML</dt>
<dd>Język znaczników, który opisuje strukturę strony.</dd>
<dt>CSS</dt>
<dd>Arkusze stylów odpowiedzialne za wygląd.</dd>
<dt>JavaScript</dt>
<dd>Język programowania, który ożywia stronę.</dd>
</dl>Definicja i zastosowanie
#Element <dl> (od description list) grupuje pary złożone z nazwy i opisu. Nazwę zapisujesz w <dt>, a opis w <dd>. Typowe zastosowania to słowniczek pojęć, specyfikacja produktu, dane w profilu użytkownika („E-mail”, „Miasto”) albo pytania i odpowiedzi.
Jedna nazwa może mieć kilka opisów, a kilka nazw (na przykład synonimów) może dzielić jeden opis. Każdą grupę możesz też owinąć w <div>, co ułatwia stylowanie, na przykład układ w dwóch kolumnach za pomocą CSS Grid.
Nie używaj <dl> do zapisu dialogów ani tylko po to, żeby uzyskać wcięcie. Wcięcie opisu to jedynie domyślny styl <dd>, który i tak zwykle zmieniasz w CSS.
Składnia
#<dl>
<dt>nazwa</dt>
<dd>opis</dd>
</dl>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<style>
.course-info div { display: grid; grid-template-columns: 130px 1fr; }
.course-info dt { font-weight: bold; }
.course-info dd { grid-column: 2; margin: 0; }
</style>
<dl class="course-info">
<div>
<dt>Poziom</dt>
<dd>Początkujący</dd>
</div>
<div>
<dt>Czas trwania</dt>
<dd>6 tygodni</dd>
</div>
<div>
<dt>Technologie</dt>
<dd>HTML</dd>
<dd>CSS</dd>
</div>
</dl>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
dl {
display: block;
margin-block: 1em;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nazwa w
<dt>nie jest automatycznie definicją. W słowniczku owiń termin w<dfn>, żeby zaznaczyć, że właśnie tu jest definiowany. - Każdy
<div>wewnątrz<dl>musi zawierać komplet: co najmniej jeden<dt>i co najmniej jeden<dd>. <dt>nie jest domyślnie pogrubiony. Jeśli chcesz wyróżnić nazwy, zrób to w CSS.
Powiązane hasła
#- <dt>Nazwa, pojęcie lub pytanie w liście opisowej `<dl>`.
- <dd>Opis lub wartość przypisana do nazwy `<dt>` w liście opisowej.
- <ul>Lista wypunktowana, w której kolejność pozycji nie ma znaczenia.
- <ol>Lista numerowana, w której kolejność pozycji ma znaczenie.
- <dfn>Termin definiowany w tym miejscu tekstu, czyli pierwsze, objaśniające użycie pojęcia.
Widzisz błąd albo brakuje przykładu? Napisz do nas.