Un element care functioneaza cu principiul parinte - copil, este cel cu care cream o lista.

In HTML putem crea doua tipuri de liste: una ordonata (unde elementele ei sunt numerotate) sau una ce nu tine cont de ordine (unde elementele ei au o bulina in fata).

Pentru o lista ordonata avem tag-ul <ol> (de la ordered list = lista ordonata), iar pentru o lista fara ordine avem <ul> (de la unordered list = lista neordonata).

Asadar intreaga lista trebuie cuprinsa in unul din cele 2 tag-uri.

La randul lor fiecare element al listei trebuie cuprins intr-un tag special: <li> (list item = element al listei). In interiorul lui putem avea orice tip de continut: imagini, text, linkuri, butoane. Dar pentru moment vom folosi doar text.

De exemplu, o lista scurta cu orase va arata astfel:

<ul>
    <li>Bucuresti</li>
    <li>Iasi</li>
    <li>Timisoara</li>
    <li>Brasov</li>
</ul>

Vedem cum intreaga lista este cuprinsa de tag-urile <ol></ol> (elementul parinte), iar fiecare oras este cuprins de tag-urile <li></li> (elementele copil).

Pentru a transforma lista de mai sus intr-una ordonata, nu trebuie decat sa schimbam tag-ul principal:

<ol>
    <li>Bucuresti</li>
    <li>Iasi</li>
    <li>Timisoara</li>
    <li>Brasov</li>
</ol>

Diferenta nu este mare intre ele, dar conteaza pentru browser. El trebuie sa intelega continutului din aceasta lista, si anume daca ordinea conteaza. De aceea folosim un tag in locul celuilalt.

Alt continut

Dar in interiorul unui element <li></li> nu trebuie neaparat sa avem doar text, putem folosi orice element HTML.

Putem introduce un paragraf, care si el la randul lui poate contine alte elemente:

<ol>
    <li>
        <p>Bucuresti - <strong>capitala</strong></p>
    </li>
    <li>Iasi</li>
    <li>Timisoara</li>
    <li>Brasov</li>
</ol>

Si astfel putem incepe sa combinam elementele intre ele si sa le includem unele in altele pentru a construi structuri din ce in ce mai complexe.

Unde le putem folosi?

Listele sunt destul de folositoare, in special in meniul unui web-site. Folosind CSS, putem scapa de buline sau de numerotarea elementelor, si o putem chiar face sa se afiseze pe un singur rand. Vom vedea in lectiile urmatoare cum putem influenta modul in care este afisat orice element HTML.