HTML Listák Készítése

A weben az információk strukturálásának egyik legjobb módja a listák használata. Gondolj egy bevásárlólistára, egy recept lépéseire, vagy akár egy weboldal navigációs menüjére (igen, a menük is listákból épülnek fel a motorháztető alatt!). A HTML két fő listatípust különböztet meg.

1. Rendezetlen listák (Unordered Lists)

A rendezetlen listákat akkor használjuk, amikor a listaelemek sorrendje nem számít (például egy bevásárlólista). A böngésző ezeket alapértelmezésben kis fekete pöttyökkel (bullet points) jeleníti meg.

A lista létrehozásához két tagre van szükségünk. Az <ul> (unordered list) tag jelöli magát a listát, a listán belüli egyes elemeket pedig az <li> (list item) tagek közé kell tennünk.

<h3>Bevásárlólista:</h3>
<ul>
    <li>Tej</li>
    <li>Kenyér</li>
    <li>Tojás</li>
</ul>

2. Rendezett listák (Ordered Lists)

A rendezett listákat akkor használjuk, amikor a sorrend kritikus (például egy összeszerelési útmutató vagy egy toplista). A böngésző ezeket automatikusan beszámozza (1, 2, 3...).

A szintaxis szinte teljesen megegyezik a rendezetlen listával, csak az <ul> helyett <ol> (ordered list) taget használunk. A listaelemek itt is <li> tagek maradnak.

<h3>Hogyan főzzünk teát:</h3>
<ol>
    <li>Forralj vizet.</li>
    <li>Tedd a teafiltert a bögrébe.</li>
    <li>Öntsd rá a forró vizet.</li>
    <li>Várj 5 percet.</li>
</ol>

A zseniális a rendezett listákban az, hogy ha később beszúrsz egy új <li> elemet a kód közepére, a böngésző automatikusan újraszámozza az egészet. Nem kell kézzel átírnod a számokat!

Listák egymásba ágyazása (Nested Lists)

Gyakran előfordul, hogy egy listaelemhez egy újabb, al-listát szeretnénk rendelni. Ezt egymásba ágyazásnak hívjuk. A szabály egyszerű: az új listát (legyen az <ul> vagy <ol>) egy meglévő <li> tagen belülre kell tenned.

<ul>
    <li>Kávé</li>
    <li>Tea
        <ul>
            <li>Fekete tea</li>
            <li>Zöld tea</li>
        </ul>
    </li>
    <li>Víz</li>
</ul>

A böngésző érzékeli az egymásba ágyazást, és az al-listát automatikusan beljebb húzza, valamint a pöttyök stílusát is megváltoztatja (például teli pötty helyett üres karikát használ), hogy vizuálisan is elkülönüljön.