Seznamy

Používání seznamů je v současných textech velmi běžné. Každou chvíli někde vidíte výčet vlastností, kroky pracovního postupu či podobné informace. HTML nabízí tři různé druhy seznamů.

Seznam s odrážkami

Říká se mu též seznam výčtový. Jeho jednotlivé položky jsou zahájeny grafickým symbolem (černou tečkou, pomlčkou a podobně). Do stránky se vkládá prvkem <ul> (Unordered List), jehož tělem je obsah seznamu. Ten je rozdělen do jednotlivých položek představovaných prvky <li> (List Item). Celá kompozice vypadá následovně:

<ul>
<li>Text první položky.</li>
<li>Text druhé položky. Poněkud delší, aby bylo
vidět, jak se chová vzhled seznamu, když text položky
přesáhne jeden řádek. Pro jistotu sem přidám raději
ještě jednu větu.</li>
<li>Text třetí položky.</li>
</ul>

Seznam bývá odsazen od levého okraje a na začátku každé jeho položky se nachází grafický symbol. Formátovaná podoba příkladu uvedeného výše vypadá takto:

• Text první položky.
• Text druhé položky. Poněkud delší, aby bylo vidět, jak se chová vzhled seznamu, když text položky přesáhne jeden řádek. Pro jistotu sem přidám raději ještě jednu větu.
• Text třetí položky.

Číslovaný seznam

Velmi se podobá předchozímu. Jediným rozdílem je, že položky jsou namísto grafických symbolů zahajovány pořadovými čísly (nebo písmeny). Hodí se proto například pro zobrazení kroků pracovního postupu.

Vkládá se prvkem <ol> (Ordered List), což je jeho jediný rozdíl proti seznamu s odrážkami. Příklad:

<ol>
<li>Text první položky.</li>
<li>Text druhé položky. (zkrácený)</li>
<li>Text třetí položky.</li>
</ol>

a jeho formátovaná podoba:

1. Text první položky.
2. Text druhé položky. Poněkud delší, aby bylo vidět, jak se chová vzhled seznamu, když text položky přesáhne jeden řádek. Pro jistotu sem přidám raději ještě jednu větu.
3. Text třetí položky.

Seznam definic

Je z nich nejsložitější. Každá jeho položka má dvě části: definovaný pojem (nadpis) a jeho vysvětlení. Používá se například ve slovnících, ale lze jej nasadit i pro vizuální navigaci čtenáře na stránce – pojmy mohou třeba obsahova skvělé vlastnosti výrobku a popisy k nim je rozvádějí.

Seznam definic je vložen prvkem <dl> (Definition List). Jeho položky se skládají z prvků <dt> (Definition Term, definovaný pojem) a <dd> (Definition Description, jeho popis).

Obsah prvku <dd> bývá odsazen od levého okraje, zatímco definované pojmy (<dt>) nikoli. Výsledný efekt je takový, že nadpisy jsou „vystrčeny“ do rozšířeného levého okraje. Implicitně se žádné další zvýraznění nekoná. Je proto záhodno použít pro ně ještě některý ze zvýrazňujících prvků (<strong> či <em>), případně jejich nápadnost podpořit pomocí CSS.

Podívejme se na příklad použití seznamu definic pro výklad dvojice počítačových pojmů:

<dl>
<dt><strong>klávesnice</strong></dt>
<dd>Základní zařízení pro vstup dat do počítače.
Hodí se především pro zadávání textů a číselných hodnot.</dd>

<dt><strong>myš</strong></dt>
<dd>Polohovací zařízení. Používá se v grafickém
uživatelském rozhraní pro řízení pohybu kurzoru
po obrazovce.</dd>
</dl>

A výsledek:

klávesnice

Základní zařízení pro vstup dat do počítače. Hodí se především pro zadávání textů a číselných hodnot.

myš

Polohovací zařízení. Používá se v grafickém uživatelském rozhraní pro řízení pohybu kurzoru po obrazovce.

Vnořování seznamů

Seznamy lze do sebe vnořovat. To znamená, že tělo položky seznamu může obsahovat další seznam a jeho položky další atd. Vzhledově bývají vnořené seznamy více odsazeny od levého okraje a také uvozující grafické symboly či pořadová čísla se mění. Podívejte se na ukázku.