Gli elenchi

In HTML si possono inserire elenchi di due tipi: ordinati e non ordinati. Entrambi, però, condividono la stessa struttura:

<tag_elenco>
    <tag_elemento>primo elemento</tag_elemento>
    <tag_elemento>secondo elemento</tag_elemento>
    <tag_elemento>terzo elemento</tag_elemento>
</tag_elenco>

dove il tag elemento è <li> ed è comune a tutti e due gli elenchi, mentre il tag elenco può essere <ol> o <ul> a seconda dei casi.

Elenchi ordinati

Gli elenchi ordinati sono composti da due tag: <ol> che sta per “ordered list” e che contiene tutto l'elenco e <li> che sta per “list item” e che contiene un punto nell'elenco. Le liste ordinate distinguono gli elementi sulla base delle posizioni. Potremmo, per esempio, avere un elenco del tipo:

1. farina
2. acqua
3. uova

con codice:

<ol>
    <li>farina</li>
    <li>acqua</li>
    <li>uova</li>
</ol>

Il tipo di identificativo può essere cambiato con l'attributo type, che può assumere il valore di "A","a","I","i":

type=“A”type=“a”type=“I”type=“i”

Elenco alfabetico con le maiuscole

1. elemento uno
2. elemento due
3. elemento tre

<ol type="A">
    <li>elemento uno</li>
    <li>elemento due</li>
    <li>elemento tre</li>
</ol>

Elenco alfabetico con le minuscole

1. elemento uno
2. elemento due
3. elemento tre

<ol type="a">
    <li>elemento uno</li>
    <li>elemento due</li>
    <li>elemento tre</li>
</ol>

Elenco con numeri romani maiuscoli

1. elemento uno
2. elemento due
3. elemento tre

<ol type="I">
    <li>elemento uno</li>
    <li>elemento due</li>
    <li>elemento tre</li>
</ol>

Elenco con numeri romani minuscoli

1. elemento uno
2. elemento due
3. elemento tre

<ol type="i">
    <li>elemento uno</li>
    <li>elemento due</li>
    <li>elemento tre</li>
</ol>

L'attributo start può essere usato per partire da un determinato numero con l'elenco ordinato, ad esempio start="5" indicherebbe che si inizia dall'elemento 5.

5. elemento uno
6. elemento due
7. elemento tre

<ol start="5">
    <li>elemento uno</li>
    <li>elemento due</li>
    <li>elemento tre</li>
</ol>

Elenchi non ordinati

Gli elenchi non ordinati sono invece contenuti nel tag <ul> dove “ul” sta infatti per unordered list e indica i tipici elenchi puntati. Ad esempio:

• Alpha
• Beta
• Gamma

Si scrive con:

<ul>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
</ul>

Elenchi annidati

Si possono annidare più elenchi all'interno dello stesso, sia non ordinati:

Che ordinati:

Nel caso dell'elenco non ordinato il pallino vuoto è inserito in automatico. Nel caso dell'elenco ordinato, invece, non specificando alcuno stile del tipo di numerazione, è mantenuto quello di default (ovvero che parte da 1 e va avanti con un puntino a lato come nell'immagine). Di conseguenza, se si vuole distinguere la numerazione del sotto-elenco nel caso di quello ordinato, bisogna specificare un tipo di numerazione diverso.

A livello di spaziature, gli elenchi si comportano come i paragrafi: prima e dopo l'elenco è sempre lasciata una riga bianca. Gli spazi prima e dopo gli elenchi annidati, invece, non ci sono.