# Lista zagadnień

Czym jest lista zagadnień?

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FejfPpAJuqoAK7y5bVtrI%2Fimage.png?alt=media&#x26;token=da0814e9-ac9f-47bf-91a4-eb6dd4507fb4" alt=""><figcaption></figcaption></figure>

Lista zagadnień jest listą ściśle powiązanych ze sobą treści. Wspomnianymi treściami mogą być terminy i definicje, pytania i odpowiedzi oraz każde inne tego typu treści, które uznamy za treści ściśle powiązane ze sobą.

Listę zagadnień reprezentuje element dl. Listę zagadnień tworzy element `dl` wraz ze swoimi elementami dziećmi typu dt oraz typu dd.

```html
<!-- PRZYKŁADOWA STRUKTURA LISTY ZAGADNIEŃ -->
<dl>
  <dt> <!-- miejsce na pierwsze zagadnienie listy zagadnień --> </dt>
  <dd> <!-- miejsce na opis pierwszego zagadnienia listy zagadnień --> </dd>

  <dt> <!-- miejsce na drugie zagadnienie listy zagadnień --> </dt>
  <dd> <!-- miejsce na opis drugiego zagadnienia listy zagadnień --> </dd>

  <dt> <!-- miejsce na trzecie zagadnienie listy zagadnień --> </dt>
  <dd> <!-- miejsce na opis trzeciego zagadnienia listy zagadnień --> </dd>
</dl>
```

Znając podstawową strukturę HTML listy zagadnień spróbujmy znaleźć treść, którą możemy dopasować do wspomnianej listy zagadnień.

Wspomnianą treścią przykładowo mogą być pytania i odpowiedzi należące do jednej i tej samej grupy pytań i odpowiedzi, czyli pytań i odpowiedzi dotyczących tego samego tematu, na przykład pytań i odpowiedzi dotyczących naszych ulubionych rzeczy.

Przykład:

```html
<dl>
  <dt>Jaki jest mój ulubiony kolor?</dt>
  <dd>Moim ulubionym kolorem jest kolor błękitny.</dd>

  <dt>Jakie jest moje ulubione zwierzę?</dt>
  <dd>Moim ulubionym zwierzęciem jest lew.</dd>

  <dt>Jaki jest mój ulubiony owoc?</dt>
  <dd>Moim ulubionym owocem jest czereśnia.</dd>

  <dt>Jaki jest mój ulubiony kwiat?</dt>
  <dd>Moim ulubionym kwiatem jest róża.</dd>
</dl>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FOb2okaNkMz8Lov8yU8PT%2Fimage.png?alt=media&#x26;token=5455f2fd-8f42-448c-85d5-c9af87459962" alt=""><figcaption></figcaption></figure>

Struktura HTML listy zagadnień może posiadać dwa dodatkowe warianty.

Pierwszy dodatkowy wariant struktury HTML listy zagadnień ujawnia się w sytuacji, gdy interesujące nas zagadnienie może posiadać kilka alternatywnych opisów.

```html
<!--
  PRZYKŁADOWA STRUKTURA LISTY ZAGADNIEŃ
  WARIANT KILKU ALTERNATYWNYCH OPISÓW
  DOTYCZĄCYCH TEGO SAMEGO ZAGADNIENIA
-->
<dl>
  <dt> <!-- miejsce na pierwsze zagadnienie listy zagadnień --> </dt>
  <dd> <!-- miejsce na pierwszy alternatywny opis pierwszego zagadnienia listy zagadnień --> </dd>
  <dd> <!-- miejsce na drugi alternatywny opis pierwszego zagadnienia listy zagadnień --> </dd>
  <dd> <!-- miejsce na trzeci alternatywny opis pierwszego zagadnienia listy zagadnień --> </dd>
  <dd> <!-- miejsce na czwarty alternatywny opis pierwszego zagadnienia listy zagadnień --> </dd>
</dl>
```

Przykład:

```html
<dl>
  <dt>Czym jest zamek?</dt>
  <dd>Zamek jest budowlą.</dd>
  <dd>Zamek jest mechanizmem występującym w odzieży.</dd>
  <dd>Zamek jest mechanizmem występującym w drzwiach.</dd>

  <dt>Czym jest serce?</dt>
  <dd>Serce to organ istot żywych.</dd>
  <dd>Serce to symbol miłości.</dd>
</dl>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FqRDUBrpNQ8WNiiHAFME1%2Fimage.png?alt=media&#x26;token=527ca04c-73e6-4c6f-ae01-8d4e302891ec" alt=""><figcaption></figcaption></figure>

Drugi dodatkowy wariant struktury HTML listy zagadnień ujawnia się w sytuacji, gdy interesujące nas zagadnienia mogą posiadać jeden i ten sam opis.

```html
<!--
  PRZYKŁADOWA STRUKTURA LISTY ZAGADNIEŃ
  WARIANT JEDNEGO OPISU
  DOTYCZĄCEGO RÓŻNYCH ZAGADNIEŃ
-->
<dl>
  <dt> <!-- miejsce na pierwsze zagadnienie listy zagadnień --> </dt>
  <dt> <!-- miejsce na drugie zagadnienie listy zagadnień --> </dt>
  <dt> <!-- miejsce na trzecie zagadnienie listy zagadnień --> </dt>
  <dd> <!-- miejsce na opis pierwszego, drugiego oraz trzeciego zagadnienia listy zagadnień --> </dd>
</dl>
```

Przykład:

```html
<dl>
  <dt>Rzecz, która nas uspokaja?</dt>
  <dt>Rzecz, która nas pobudza?</dt>
  <dt>Rzecz, która wprawia nas w ruch?</dt>
  <dd>Rzeczą tą jest muzyka.</dd>
</dl>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2F6KllCgedfTu5294qOckb%2Fimage.png?alt=media&#x26;token=08bb779f-2d6f-46f1-abca-1a6a6ded1ac9" alt=""><figcaption></figcaption></figure>
