HTML bylo vytvořeno pro psaní strukturovaných dokumentů. Typickým strukturním prvkem, objevujícím se ve většině dokumentů, jsou různé seznamy. V HTML nalezneme podporu hned pro tři druhy seznamů – nečíslované, číslované a definiční. Při vytváření nečíslovaného seznamu postupujeme následovně:
-
celý seznam zahájíme tagem
<ul>; -
napíšeme potřebný počet položek seznamu, každou položku uzavřeme mezi tagy
<li>a</li>; -
seznam ukončíme tagem
</ul>.
Malá ukázka jednoduchého seznamu:
Nabízené druhy ovoce:
<ul>
<li>Jablka</li>
<li>Hrušky</li>
<li>Švestky</li>
<li>Banány</li>
</ul>
Pod jednou položkou seznamu může být skryto i více
odstavců. Stačí je uzavřít do elementu p.
U číslovaných seznamů je před každou položku seznamu
automaticky umisťováno pořadové číslo. Vytváření těchto seznamů je
zcela identické s vytvářením nečíslovaných seznamů. Jednotlivé
položky se opět uzavírají do elementu li.
Pro seznam však místo elementu ul
použijeme ol:[4]
Pořadí ovoce podle prodejnosti:
<ol>
<li>Jablka</li>
<li>Hrušky</li>
<li>Švestky</li>
<li>Banány</li>
</ol>
Poznámka
Jazyk HTML nevyžaduje ukončování položek seznamu pomocí </li>. Předchozí ukázku proto můžeme zapsat i trošku
úspornějším způsobem:
Pořadí ovoce podle prodejnosti:
<ol>
<li>Jablka
<li>Hrušky
<li>Švestky
<li>Banány
</ol>
Jazyk XHTML však striktně vyžaduje uzavírání elementů, a proto je lepší si na trošku výřečnější způsob zvykat rovnou.
Definiční seznamy se od předchozích dvou liší. S výhodou je
lze použít např. pro vytvoření slovníčku pojmů, který obsahuje
termíny a jejich vysvětlení. K vytvoření seznamu slouží
element dl (Definition List – definiční
seznam). Postup vytvoření definičního seznamu je následovný:
-
seznam zahájíme tagem
<dl>; -
definovaný termín zapíšeme mezi tagy
<dt>a</dt>; -
definici termínu umístíme mezi tagy
<dd>a</dd>; -
opakujeme kroky 2 a 3 pro každý termín v seznamu;
-
seznam ukončíme tagem
</dl>.
Vytvořit takto slovníček protokolů používaných v Internetu není žádný problém:
<dl>
<dt>HTTP</dt>
<dd>Transportní protokol využívaný k přenosu souborů
obsahujících popis WWW-stránek v jazyce HTML.</dd>
<dt>FTP</dt>
<dd>Transportní protokol používaný k přenosu souborů.</dd>
<dt>NNTP</dt>
<dd>Transportní protokol používaný k přenosu news.</dd>
</dl>
Tip
Vidíme, že definované termíny
nejsou příliš výrazné. Mnohem lépe vypadá definiční seznam, ve kterém
termíny zvýrazníme např. pomocí elementu
strong.
<dl>
<dt><strong>HTTP</strong></dt>
<dd>Transportní protokol využívaný k přenosu souborů
obsahujících popis WWW-stránek v jazyce HTML.</dd>
<dt><strong>FTP</strong></dt>
<dd>Transportní protokol používaný k přenosu souborů.</dd>
<dt><strong>NNTP</strong></dt>
<dd>Transportní protokol používaný k přenosu news.</dd>
</dl>
Poznámka
Ještě efektivnější řešení zvýraznění termínů v definičním souboru nabízejí kaskádové styly (viz ???).
Seznamy mohou být do sebe libovolně vnořovány. To znamená, že součástí položky jednoho seznamu může být celý další seznam.
Pro tvorbu stránek v jazyce HTML můžeme použít:
<ol>
<li>Obyčejné textové editory
<ul>
<li>Notepad</li>
<li>Programmer's File Editor</li>
<li>HTML-Kit</li>
<li>HomeSite</li>
<li>vim</li>
</ul>
</li>
<li>Textové editory podporující vytváření struktury HTML
dokumentu
<ul>
<li>HotMetal Pro</li>
<li>asWedit</li>
<li>Emacs+PSGML</li>
</ul>
</li>
<li>WYSIWYG editory HTML stránek
<ul>
<li>FrontPage</li>
<li>Netscape Composer</li>
<li>WebMagic Pro</li>
</ul>
</li>
</ol>
[4] Zkratka UL pochází z anglického Unordered List (neuspořádaný seznam) a OL z Ordered List (uspořádaný seznam).
