Seznamy

Seznamy jsou super pro uspořádání informací, receptů, pokynů nebo seznamu oblíbených věcí. HTML má tři hlavní typy seznamů:

Neuspořádaný seznam

<ul> znamená "unordered list" (neuspořádaný seznam). Položky v tomto seznamu mají obvykle odrážky (tečky nebo jiné symboly), ale nejsou číslovány.

Každá položka v seznamu je uvnitř značky <li> (list item - položka seznamu).

<h3>Můj seznam oblíbených barev</h3>
<ul>
    <li>Modrá</li>
    <li>Zelená</li>
    <li>Žlutá</li>
    <li>Červená</li>
</ul>

Uspořádaný seznam

<ol> znamená "ordered list" (uspořádaný seznam). Položky v tomto seznamu jsou číslovány (nebo mají písmena či římské číslice).

Stejně jako u neuspořádaného seznamu, každá položka je uvnitř značky <li>.

<h3>Postup, jak si vyčistit zuby</h3>
<ol>
    <li>Vezmi si kartáček.</li>
    <li>Dej na něj pastu.</li>
    <li>Čisti si zuby krouživými pohyby.</li>
    <li>Vypláchni si pusu vodou.</li>
</ol>

Typy číslování u uspořádaného seznamu (type atribut)

Můžeme si vybrat, jakým stylem se budou položky číslovat pomocí atributu type u značky <ol>:

• type="1": Čísla (1, 2, 3...) - toto je výchozí
• type="a": Malá písmena (a, b, c...)
• type="A": Velká písmena (A, B, C...)
• type="i": Malé římské číslice (i, ii, iii...)
• type="I": Velké římské číslice (I, II, III...)

<h3>Tři nejlepší filmy podle abecedy</h3>
<ol type="a">
    <li>Film A</li>
    <li>Film B</li>
    <li>Film C</li>
</ol>

Popisný seznam

<dl> znamená "description list" (popisný seznam). Používá se pro seznamy, kde máme termín a jeho vysvětlení (jako ve slovníku).

• <dt> (description term - popisný termín): Pro termín, který vysvětlujete.
• <dd> (description definition - definice popisu): Pro vysvětlení termínu.

<h3>Malý IT Slovník pro děti</h3>
<dl>
    <dt>HTML</dt>
    <dd>Jazyk pro tvorbu webových stránek. Představme si ho jako kostru webu.</dd>

    <dt>CSS</dt>
    <dd>Jazyk pro stylování webových stránek. Je to jako barvy a dekorace pro náš web.</dd>

    <dt>Internet</dt>
    <dd>Velká síť počítačů po celém světě, které si navzájem povídají.</dd>
</dl>

Vnořené seznamy

Seznamy můžeme vkládat i do sebe! To je super, když chceme mít podrobnější uspořádání.

<h3>Můj nákupní seznam</h3>
<ul>
    <li>Ovoce
        <ul>
            <li>Jablka</li>
            <li>Banány</li>
        </ul>
    </li>
    <li>Zelenina
        <ol>
            <li>Mrkev</li>
            <li>Okurka</li>
        </ol>
    </li>
</ul>