Definiční seznam v HTML

(Převzato z HTML seznamy)

Definiční seznam <dl>

Definiční seznam je něco mezi nečíslovaným seznamem a jednoduchou tabulkou o dvou sloupcích.

Hodí se pro případy, kde existují dvojice typu termín — definice.

<dl>
  <dt>Je čas</dt>
  <dd>Web o moderní tvorbě webových stránek</dd>
</dl>

Samotná značka <dl> (definition list) tedy slouží jako obal pro značky <dt> a <dd> – podobně jako <ul> a <ol> je obal pro <li>.

<dt> (definition term)
   Označuje termín, který se bude definovat.
<dd> (definition description)
   Obsahuje popis dříve definovaného termínu.

K jednomu termínu (<dt>) může být více definic (<dd>), stejně tak více termínů může mít jedinou definici nebo více termínů může mít více definic.

<dl>
  <dt>Je čas</dt>
  <dd>Web o moderní tvorbě webových stránek</dd>
  <dd>Nějaký další význam</dd>
</dl>

Výchozí vzhled definičního seznamu odsazuje zleva popis (<dd>), definice a popis jsou potom na zvláštních řádcích – všechny tři značky definičního seznamu jsou blokové (display: block).

Pomocí obtékání jde <dt> a <dd> umístit i vedle sebe.

HTML značky v definičních seznamech

Do značek <dt> a <dd> jde umístit prakticky jakýkoliv další element nebo další definiční seznam.

Využití

Kromě vysvětlování pojmů bývají definiční seznamy někdy používány i pro:

Formuláře

Políčko:

<dl>
  <dt><label for="policko">Políčko</label></dt>
  <dd><input id="policko" type="text"></dd>
</dl>

Diskusní příspěvky / komentáře:

Autor
Text příspěvku

<dl>
  <dt>Autor</dt>
  <dd>Text příspěvku</dd>
</dl>

Seznam zdrojů:

HTML seznamy
Kompletní přehled používání seznamů v HTML

<dl>
  <dt><a href="/seznamy">HTML seznamy</a></dt>
  <dd>Kompletní přehled používání seznamů v HTML</dd>
</dl>