Seznamy a slovníček pojmů - Český HTML 5 manuál

Seznam používáme vždy, kdy potřebujeme vyjmenovat položky, které se sebou nějak souvisí. Může se jednat např. o seznam použité literatury, o číslované kroky v tutoriálu nebo o navigační menu. V HTML máme 3 typy seznamů.

<ul>

Prvním typem seznamu je <ul> (Unordered List = neuspořádaný seznam). Položky v něm jsou neočíslované (neuspořádané) a standardně se zobrazují pomocí odrážek, jako to známe např. z Wordu. Ačkoli je seznam chápán jako neuspořádaný, pořadí prvků v kódu na vykreslené stránce samozřejmě zůstane zachováno. <ul> je tag párový a obaluje položky seznamu.

<li>

<li> (jako List Item) označuje jednu položku seznamu a nejčastěji tedy obaluje její text. Může však obsahovat i obrázky a další libovolné elementy. Ukažme si jednoduchý příklad seznamu, přejatý ze zdejšího úvodního tutoriálu:

<h2>Co jsem se dnes naučil</h2>
<ul>
  <li>Vytvářet tabulky</li>
  <li>Slučovat buňky</li>
  <li>Co je to sémantika</li>
  <li>Vytvořit uspořádaný seznam</li>
</ul>

Výstup:

Pomocí <ul> se často řeší navigační menu, jen musíme pomocí CSS skrýt odrážky a celý seznam vložit do tagu <nav>.

<ol>

Uspořádaný seznam (Ordered List) se liší od neuspořádaného tím, že prvky jsou řazeny dle nějakého klíče. Tím je nejčastěji priorita nebo posloupnost akcí. Zápis je naprosto stejný, jako u neuspořádaného seznamu, opět <ol> obalíme položky seznamu <li>. Místo odrážek nám u položek seznamu prohlížeč v základním stylu zobrazí číslice:

<h2>Můj prioritní jídelníček</h2>
<ol>
  <li>Špagety</li>
  <li>Smetanový sos</li>
  <li>Hamburger</li>
  <li>Cheese burger</li>
  <li>Brokolice</li>
</ol>

A výsledek:

Narozdíl od neuspořádaného seznamu má element <ol> několik atributů:

• reversed - Pokud je atribut uveden, jsou položku seznamu číslovány opačně, tedy sestupně. Jako hodnota se obvykle uvádí reversed, ale může se uvést i prázdná nebo žádná.
• start - Hodnota atributu určuje první číslo v seznamu.
• type - Nastavuje typ číslování, můžeme nastavit hodnoty: 1, A, a, I, i pro arabské číslice, písmena a římské číslice.

Elementu <li> můžeme přidat následující atribut:

• value - U uspořádaného seznamu označuje číslo dané položky. Následující položky se poté automaticky číslují od této hodnoty.

<dl>

Posledním typem seznamu je slovníček pojmů (Definition List). Narozdíl od prvních dvou obsahuje 2 typy položek, a to:

<dt>

Vysvětlovaný pojem vkládáme to tagu <dt> (jako Definition Term).

<dd>

Pojem vysvětlíme v tagu <dd> (jako Definition Definition).

Pojďme si udělat ukázku:

<h2>Slovníček pojmů k článku</h2>
<dl>
    <dt>Tutoriál</dt>
        <dd>Názorný návod k použití, většinou krok za krokem</dd>
    <dt>ITnetwork</dt>
        <dd>Programátorská sociální síť a materiálová základna</dd>
    <dt>Seznam</dt>
        <dd>Množina položek, které spolu nějakým způsobem souvisí</dd>
</dl>

a výsledek: