Lekce 5 - Seznamy v HTML

V předchozím kvízu, Kvíz - Rozložení stránky a layout v HTML5, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

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 několik typů seznamu.

<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. Pomocí atributu type můžeme vizualitu odrážek změnit. Stejně tak pomocí kaskádových stylů (CSS) díky vlastnosti list-style-type. 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. Tag <ul> je párový a obaluje položky seznamu.

<menu> a <dir>

Dalšími typy seznamu jsou tagy <menu> a <dir>. V zásadě se tyto tagy chovají stejně jako <ul>, avšak už nemusí být podporovány nejnovějšími prohlížeči. Jako alternativu využijte raději tag <ul>.

<li>

Tag <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:

<h2>Co jsem se dnes naučil</h2>
<ul style="list-style-type:circle">
  <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>
<menu style="list-style-type:square">
  <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>
</menu>
<dir style="list-style-type:disc">
  <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>
</dir>

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 tag <ol> obalíme položky seznamu tagy <li>. Místo odrážek nám u položek seznamu prohlížeč v základním stylu zobrazí písmena, číslice, římské číslice atd.

Na rozdí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 pro arabské číslice, jak jsme zvyklí,
  • A a a pro písmena a
  • I a i pro ří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.

Ukažme si to na příkladu s různými vlastnostmi:

<h2>Můj prioritní jídelníček</h2>
<ol start="10">
  <li>Tvaroh</li>
  <li>Kuřecí maso</li>
  <li>Sýr</li>
</ol>
<ol type="A">
  <li>Těstoviny</li>
  <li>Brambory</li>
  <li>Rýže</li>
</ol>
<ol type="I">
  <li>Salám</li>
  <li>Šunka</li>
  <li>Párky</li>
</ol>
<ol>
  <li value="4">Tvaroh</li>
  <li>Kuřecí maso</li>
  <li>Sýr</li>
</ol>

A výsledek v prohlížeči:

<dl>

Posledním typem seznamu je slovníček pojmů (Definition List). Na rozdíl od ostatních obsahuje 2 typy položek, které se střídají a to tagy <dt> a <dd>.

<dt> a <dd>

Tag <dt> (jako Definition Term) se vyskytuje pouze uvnitř tagu <dl>. Zpravidla se zobrazuje vždy na novém řádku u levého okraje stránky. Tagem <dd> (jako Definition Definition) zapisujeme definici již zmíněného tagu <dt>:

<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>

V prohlížeči dostaneme toto:

<datalist>

Tag <datalist> se v HTML 5 používá k označení skupiny možností, které jsou poté navrhovány v elementu <input>. Jedná se tedy o tzv. našeptávač (autocomplete). Elementu <input> zadáme v atributu list id elementu <datalist>, který obsahuje možnosti v podobě elementů <option>.

Využití element nalezne tam, kde je k dispozici opravdu mnoho možností. Např. můžeme napovídat nejčastější dotazy při vyhledávání nebo přezdívky členů fóra:

Vyberte postavu, které chcete poslat zprávu:<br />
<input list="postavy" />

<datalist id="postavy">
    <option value="Albus Brumbál">
    <option value="Harry Potter">
    <option value="Voldemort">
    <option value="Hermiona Grangerová">
    <option value="Ron Weasley">
    <option value="Draco Malfoy">
</datalist>

Výsledek:

V další lekci, Jednoduché tabulky v HTML, si ukážeme tagy <table>, <tr>, <td>, <th>, atributy border, colspan, rowspan, headers, scope a slučování buněk v tabulce.