Seznamy

Jde především o to zobrazit jednotlivé body přehledně a odděleně od ostatního obsahu.


HTML podporuje spoustu druhů seznamů, od jednoduchých odrážek po složité číslované víceúrovňové seznamy.

li

Položka seznamu (list item). Pro správné zobrazení musí být uvnitř seznamu — to znamená uvnitř elementu <ol>,<ul>, <dir> nebo <menu>.

Zobrazuje se vždy na novém řádku za číslem (pokud jde o <ol>) nebo za odrážkou (v ostatních případech). Mezi jednotlivými položkami nejsou zvětšené vertikální mezery.

Původně se jednalo o tag nepárový, současné specifikace vyžadují i koncové .

Atribut Význam Hodnoty Význam hodnot
type druh odrážky disc
circle
square
puntík
kolečko
čtvereček
druh číslování 1
A
a
I
i
normální číslování
velké písmenkování
malé písmenkování
římské číslice
malé římské číslice
value změna čísla číslo číslo položky (převedeno podle typu číslování)
pozor, dříve zde byl uveden atribut start, který u li nefunguje

ul

Nečíslovaný seznam (unordered list) je seznam, kterému je jedno jestli uvedeme položky v pořadí A B nebo v opačném B A. Typickým příkladem je seznam s tím, co máte koupit. Základní párová značka pro netříděný seznam je <ul>, která upozorní prohlížeč na to, že zde bude netříděný seznam. Uvnitř mohou být pouze elementy <li>.

Před položkami se jako odrážka zobrazí puntík, lze to ale změnit atributem type (hodnoty stejné jako u <li>). Víceúrovňové odrážky se dají dělat zanořováním dalšího <ul> do <li>. Druhá úroveň zobrazuje přednastaveně kolečko, třetí čtvereček.

Seznamy s obrázkovou odrážkou lze udělat pomocí CSS stylů a vlastosti list-style-image.

Musím koupit:

<ul>

<li>cibuli</li>
<li>mrkev</li>
<li>jahody</li>

</ul>

Text, který následuje za seznamem, je automaticky o řádek posunut.

ol

Číslovaný seznam (ordered list). Uvnitř se smějí vyskytovat pouze elementy <li> (číslované řádky). (V zanořeném tagu <li> se ale pak mohou objevovat další tagy.) Čísla k položkám samozřejmě přidá prohlížeč, o to není třeba se starat. Tento typ seznamu použijete tehdy, když vám není jedno v jakém pořadí jsou položky seznamu, nejčastěji tímto seznamem bývá pracovní postup. Zakladní značkou, jakou byla u netříděných seznamů <ul>, je tady u tříděných <ol>. Značka pro novou položku je stejná <li>..

<ol>

<li>První položka</li>
<li>Druhá položka</li>

</ol>

<ol> má atributy type a start, které mají stejný význam, jako type a value u <li>, případné nastavení téhož u jednotlivých <li> má ale větší prioritu.

Příklad: pokud nastavím různé start a value, tak vyhraje ta pětka u <li>:

<ol start=“3″>
<li value=“5″>před tímto textem bude pětka</li>
</ol>

Před a po celém seznamu se udělá vertikální mezera velikosti jednoho řádku. V tomto se seznamy podobají odstavcům (<p>). Levé odsazení se zobrazuje zpravidla ve velikosti 40 pixelů.

<ol> můžeme rozvíjet parametrem type, který slouží k vybrání tvaru odrážek.

1. type=“a“ – tvar malých písmen (a, b, c…)
2. type=“A“ – tvar velkých písmen (A, B, C…)
3. type=“I“ – tvar velkých římských čísel (I, II, III, IV…)
4. type=“i“ – tvar malých římských čísel (i, ii, iii…)
5. type=“1″ – v klasickém tvaru 1, 2, 3…

dl

Seznam definic (definition list). Obsahuje na střídačku tagy <dt> a <dd>, což by měl být termín a jeho vysvětlení.

Definice se dnes v HTML používají velmi zřídka. Ne každý autor totiž píše encyklopedie.

Jediný atribut compact způsobuje, že pokud to jde, zobrazuje se <dd> na stejném řádku jako <dt>. (V Exploreru funguje, ale dd musí začínat prostým textem, nikoli dalším tagem). Atribut compact je zastaralý a doporučuje se nepoužívat jej.

<dl>

<dt>První termín</dt>
<dd>Výklad prvního termínu</dd>
<dt>Druhý termín</dt>
<dd>Výklad druhého termínu</dd>

</dl>

dt

Definovaný termín (defined term). Může se vyskytovat pouze uvnitř elementu <dl>. Zobrazuje se vždy na novém řádku u levého okraje stránky.

dd

Definice předchozího termínu. Může se vyskytovat pouze uvnitř elementu <dl>. Zobrazuje se s levým odsazením. Mezi <dt> a <dd> není žádná vertikální mezera. Klasická velikost odsazení <dd> je 40 pixelů, ale dá se měnit pomocí CSS vlastnosti margin-left.

Víceurovňové (zanořené) seznamy

Seznam nemusí být pouze jednoúrovňový, příklad pro tento seznam je třeba lidské tělo. Nejdříve rozdělíme člověka na tělo, ruce, nohy… a poté na další úrovní dělíme tyto části třeba na hrudník, břicho… Zdrojový kód takovéhoto seznamu:

Lidské tělo
<ul>
<li>hlava
<ul>
<li>ústa
<ul>
<li>dasně</li>
<li>jazyk</li>
<li>zuby</li>
</ul>
</li> <!– konec úst –>
<li>nos</li>
<li>oči</li>
</ul>
</li> <!– konec hlavy –>

<li>tělo
<ul>
<li>hrudník</li>
<li>břicho</li>
<li>záda</li>
</ul>
</li> <!– konec tela –>
</ul>

Psaní tohoto seznamu vypadá hrůzostrašně, stačí ale zachovat v seznamu systém, nezapomínat uzavírat značky, odsazovat si jednotlivé úrovně a případně si psát poznámky. Pokud jste si předchozí příklad zkoušeli, všimli jste si, že každá úroveň měla jinou odrážku. Toho se dá docílit i ručně a to pomocí parametru type, který může nabývat hodnot disc, circle a square.

Pokud můžete, používejte seznamy co nejvíce. A toto neplatí jen v HTML, ale i v textových editorech jako Microsoft Word. Zbytečně si tím přiděláváte práci a opět narušujete logickou strukturu stránky. Na profesionálních webech se seznamy používají na veškeré menu a nabídky, i třeba na horizontální (dosáhneme toho pomocí CSS). Pořád se jedná o určitý seznam něčeho, tak když na to máme tag, tak ho budeme používat.