Seznamy
| Tag | Význam | Párový | Výskyt |
|---|---|---|---|
| li | položka seznamu | nepovinně | <ul>,<ol> <menu> nebo <dir> |
| ol | číslovaný seznam | ano | |
| ul | odrážkový seznam | ano | |
| dir | zvláštní druh seznamu | ano | |
| menu | typ seznamu | ano | |
| dl | seznam definic | ano | |
| dt | definovaný termín | ano | <dl> |
| dd | definice termínu | ano | <dl> |
li
Položka seznamu (z angl. 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.
- Ačkoli se jedná o tag, který se nemusí zavírat, doporučuji v rámci neprasení psát i koncové </li>. Chybí-li koncové </li>, prohlížeč si ho domyslí, jakmile uvidí konec seznamu (</ul>, </ol> apod.), nebo další <li>.
| 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í) |
Větší možnosti než atribut type má CSS styl list-style-type.
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.
Například takto v HTML kódu vypadá číslovaný seznam se dvěma položkami:
<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>
| Atribut | Význam | Hodnoty |
|---|---|---|
| type | typ číslování | stejné hodnoty jako type u <li> |
| start | začátek číslování | číslo |
| reversed | obrácené číslování | bez hodnoty |
HTML 5 přidalo do tagu <ol> atribut reversed, který obrací číslování. Funguje všude kromě Internet Exploreru (2015).
Zanořením dalšího tagu <ol> do elementu <li> se dá udělat víceúrovňové číslování s větším levým odsazením.
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ů, čímž se seznamy podobají tagu <blockquote>.
ul
Nečíslovaný seznam (unordered list). 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.
Příklad:
<ul style="list-style-image: URL('puntik.gif')">
<li>položka s obrázkovou odrážkou</li>
</ul>
dir, menu
Tyto tagy funkcí ani zobrazením neumím odlišit od <ul>, zobrazují a chovají se totiž ve všech směrech naprosto stejně.
Další tagy se týkají definičních výčtů
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.
Příklad správně strukturovaného definičního výčtu:
<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>
Další informace o definicích v HTML.
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.
Reklama
