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.
<li>cibuli</li>
<li>mrkev</li>
<li>jahody</li>
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>..
<li>První položka</li>
<li>Druhá položka</li>
<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>:
<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.
<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>
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 |
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.