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.

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

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

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.