XHTML – seznamy a výčty

17. března 2003

•

V podrobném přehledu XHTML budeme pokračovat seznamy a výčty, mimořádně důležitými prvky XHTML pro strukturování textu.

Pokud si nedovedete pod pojmem seznam či výčet nic představit, potom vězte, že v XHTML jsou seznamy neuspořádané:

položka
další položka
a ještě jedna položka

…a uspořádané:

první položka
druhá položka
třetí položka

Navíc se v XHTML setkáme ještě s třetím typem seznamu, a sice seznamem definic, nebo-li výčtem. Ten je od předchozích dvou trochu odlišný:

pojem: vysvětlení pojmu
další pojem: vysvětlení dalšího pojmu; jiné vysvětlení tohoto pojmu

Nyní se již ponoříme do podrobnějšího popisu.

Elementy ul a ol – seznamy

Povolený obsah: (li)+

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).

Element ul v XHTML 1.0 Strict DTD

Element ol v XHTML 1.0 Strict DTD

Pomocí elementu ul se ohraničuje neuspořádaný seznam, pomocí ol uspořádaný seznam. Tyto elementy ale samy o sobě žádný seznam nevytvoří, to se dělá až pomocí elementů li, které uzavírají jednotlivé položky.

Neuspořádané seznamy byste měli využívat, pokud máte určitý výčet věcí, úkonů apod. a chcete zdůraznit jejich rovnocennost. Uspořádaný seznam patří tam, kde je navíc třeba zdůraznit i pořadí (např. postup práce).

Element li – položky seznamu

Povolený obsah: %Flow;

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).

Element li v XHTML 1.0 Strict DTD

Elementy li ohraničují jednotlivé položky seznamu. Vedle jejich obsahu se automaticky vytváří tzv. odrážka, jejíž typ můžete změnit pomocí stylů. Do tohoto elementu můžete uzavřít téměř libovolné blokové či řádkové elementy nebo text (díky parametrické entitě %Flow;, na níž je deklarován jeho obsah). Nyní se tedy již můžete podívat, pomocí jakého kódu jsme vytvořili první dva příklady v úvodu článku:

<ul>
  <li>položka</li>
  <li>další položka</li>
  <li>a ještě jedna položka</li>
</ul>
<ol>
  <li>první položka</li>
  <li>druhá položka</li>
  <li>třetí položka</li>
</ol>

Seznamy definic

Element dl – seznam definic

Povolený obsah: (dt|dd)+

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).

Element dl v XHTML 1.0 Strict DTD

Stejně jako ul a ol, i element dl pouze ohraničuje obsah seznamu. Samotné položky se zde ale narozdíl od předchozích seznamů vytvářejí pomocí elementů dt a dd:

Element dt – definice

Povolený obsah: %Inline;

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).

Element dt v XHTML 1.0 Strict DTD

Element dd – popis

Povolený obsah: %Flow;

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).

Element dd v XHTML 1.0 Strict DTD

Uvnitř seznamu se vždy vyskytuje definice reprezentovaná elementem dt následovaná jedním či více popisy, které jsou reprezentovány elementy dd.

Samozřejmě nemusíte seznamy definic používat jen k vysvětlování pojmů, využití může být obecnější – např. když chcete mluvit o několika podobných tématech, umístěte tato témata do elementu dt a vysvětlování do elementů dd.

Elementy dt smí obsahovat pouze text a řádkové elementy, proto by definice, která je zde uzavřená, měla být co nejkratší. Naopak do elementu dd můžeme díky %Flow; umístit text, řádkové i blokové elementy. Nyní si opět ukážeme, pomocí jakého kódu jsme vytvořili příklad použití seznamů definic v úvodu článku:

<dl>
  <dt>pojem</dt>
    <dd>vysvětlení pojmu</dd>
  <dt>další pojem</dt>
    <dd>vysvětlení dalšího pojmu</dd>
    <dd>jiné vysvětlení tohoto pojmu</dd>
</dl>

Proč byste měli seznamy používat?

Používání seznamů je kromě správného strukturování stránky důležité i pro dobrou orientaci čtenáře na stránce. Jak již jistě víte, weboví uživatelé jsou většinou líní číst a dlouhé texty je snadno odradí. Proto je rozdělování delšího textu na kratší úseky pomocí nadpisů, seznamů apod. tak důležité.

Kombinování seznamů

Na závěr ještě k tomu, jak lze seznamy navzájem kombinovat. Díky faktu, že položky seznamů mohou obsahovat téměř libovolné elementy, můžete seznamy nejrůznějším způsobem vnořovat do sebe. Např. můžete umístit uspořádaný seznam do neuspořádaného seznamu:

Stejně tak můžete i vnořit uspořádaný seznam do seznamu definic:

<dl>
  <dt>definice</dt>
    <dd>vysvětlení …
      <ul>
        <li>text … </li>
        <li>text … </li>
      </ul>
    </dd>
  <dt>definice</dt>
    <dd>vysvětlení …</dd>
</dl>