Lekce 5 - Seznamy v HTML

V minulé lekci, Rozložení stránky v HTML II. část, jsme si ukázali další tagy jako <details>, <summary>, <figure>, <time> a další.

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:

Použití ul
localhost
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

Použití ol
localhost

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

Použití dl, dt, dd
localhost

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

datalist
localhost

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.


 

Předchozí článek
Rozložení stránky v HTML II. část
Všechny články v sekci
HTML5
Článek pro vás napsal Tomáš Muzikant
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje vývoji automatizačních linek do výrobního průmyslu. Ve volném čase se věnuje JavaScriptu a vývoji webových stránek.
Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!