---

Seznam definic - množiny termínů a popisků

Kolikrát jsem narazil na problém, že jsem potřeboval vytvořit sezam, ve kterém bude nějaký termín a k němu bude spadat jeho popis. Dlouhou dobu jsme tento problém řešil docela neobratným způsobem, kdy jsem používal klasický nesetříděný seznam <ul>. Dnes si však ukážeme způsob, který by nám měl tento problém vyřešit.

Metoda A: použití <ul>

<ul>
<li>CSS<br />Cascading Style Sheet</li>
<li>HTML<br />HyperText Markup Language</li>
<li>XHTML<br />eXtensible HyperText Markup Language</li>
</ul>

Výsledek :

• CSS
  Cascading Style Sheet
• HTML
  HyperText Markup Language
• XHTML
  eXtensible HyperText Markup Language

Výsledek není vůbec špatný, ze strukturního hlediska jsme vytvořili obyčejný seznam, se kterým budou vyhledávací roboti jako se seznamem pracovat. Jediný nedostatek je, že roboti a prohlížeče nepochopí vazbu mezi definicí a popisem, která je v tomto případě docela důležitá. Tato metoda jim prostě pošle jenom nesetříděný seznam, kde není chápána žádná spojitost mezi definicí a popisem.

Problém ještě také nastává kdybychom chtěli jinak stylizovat definice, na které se nemůžeme nijak přímo odkázat. Řešením může být přidání "háčku" na styl např. dodatečnou značkou <span> nebo <strong> , ale to není z hlediska údržby zrovna ideální řešení.

Metoda B: seznam definic <dl>

<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>XHTML</dt>
<dd>eXtensible HyperText Markup Language</dd>
</dl>

Seznam definic <dl> (definition list) obsahuje dvě dodatečné značky, a to termín (term) <dt> a popis (description) <dd> . V našem případě je využití seznamu definic zcela na místě, jelikož definujeme posloupnost termín/popis.

Výsledek :

CSS

Cascading Style Sheet

HTML

HyperText Markup Language

XHTML

eXtensible HyperText Markup Language

Vizuální prohlížeše většinou zbobrazi popis o řádek níž s mirným odsazením. Samozřejmě však můžeme toto standardní zobrazení potlačit pomocí CSS.

Strukrura napomáhá stylu

Sémanticky je tato metoda vhodnější jak metoda A, jelikož nám dává pro každou část seznamu zvláštní prvek. Prohlížeče a vyhledávací roboti pochopí pouto mezi termínem a popisem, čehož se snažíme dosáhnout, aby pochopili naše stránky.

Při stylizování nám velice pomáhá fakt, že termín i definice mají vlastní prvek, na který se můžeme přímo odkazovat a nemusíme vytvářet "háčky" navíc. Zkusíme přidat tučné písmo pro termíny:

dt {
font-weight: bold;
}

Výsledek :

CSS

Cascading Style Sheet

HTML

HyperText Markup Language

XHTML

eXtensible HyperText Markup Language

Nemusíme však zůstat pouze u tučného písma a můžeme si například vytvořit malou šipečku, která bude směrovat z termínu na popis.

dt {
font-weight: bold;
color: #222;
}
dd {
font-weight: bold;
color: #999;
padding-left: 23px;
margin-left: 15px;
background: url(dl_arrow.gif) no-repeat 0 0;
}

Výsledek :

CSS

Cascading Style Sheet

HTML

HyperText Markup Language

XHTML

eXtensible HyperText Markup Language

Sami vidíte, jak je stylizace velice jednoduchá. Nejkrásnější na tom je, že můžeme díky prvkům stylizovat všechny části seznamu definic, přičemž však nemusíme vůbec zasahovat do kódu.

Pouhý seznam definic?

Velice důležité je vědět, že použití seznamu definic přesahuje páry termín/popis. Seznamy definic lze stejně dobře použít také pro navigaci, dialogy a dokonce i pro formuláře. A co na to říká samotné W3C:

Seznamy definic, vytvořené pomocí prvku <dl>, obecně sestávají z řady párů termín/popis (ačkoliv je možné, aby měly i jiná využití).

Nebojte se použít seznam definic i pro jiné učely, než pouze pro spojování párů termín/popis.

Shrnutí

Jak vidíte, metoda B pro vytvoření množiny termínů a popisků úplně převládá nad metodou A. Její obrovskou výhodou je sémantický kód a jednoducá stylizace bez nutnoti zasahovat přímo do kódu. Proto při vytváření párů termín/popis používejte seznam definic, ale nezapomínejte že se nejedná o jediné možné využití...:-)

27.9.2005