Come creare un elenco o una lista in una pagina HTML

Nelle guide precedenti abbiamo visto cos’è l’HTML e come si scrive una pagina HTML. Ovviamente, proprio come un documento, all’interno di una pagina vorremo inserire vari elementi. Con questa guida vedremo come si inseriscono degli elenchi in HTML (chiamate anche liste).

Come si creano gli elenchi in HTML

Per inserire delle liste in HTML, useremo il tag <ol> per quelle in ordine numerico, alfabetico o in altri modi e <ul> per quelle puntate.

Come creare degli elenchi ordinati

Questa è una lista numerata:

1. Prima riga
2. Seconda riga
3. Terza riga

Questo è il codice che ho inserito:

<ol>
    <li>Prima riga</li>
    <li>Seconda riga</li>
    <li>Terza riga</li>
</ol>

Possiamo anche usare l’ordine alfabetico, tramite i numeri romani e altro, basta specificare il tipo (type=”a”, per l’ordine alfabetico; type=”I”, se vogliamo usare i numeri romani).

<ol type="a">
    <li>Prima riga</li>
    <li>Seconda riga</li>
    <li>Terza riga</li>
</ol>

Il risultato sarà così:

 a. Prima riga
 b. Seconda riga
 c. Terza riga

Come creare un elenco puntato

Questa è un esempio di lista puntata:

• Prima riga
• Seconda riga
• Terza riga

Questo è il codice che ho inserito:

<ul>
    <li>Prima riga</li>
    <li>Seconda riga</li>
    <li>Terza riga</li>
</ul>

In realtà, noi possiamo anche cambiare il tipo di puntatore con una regola CSS. La proprietà si chiama list-style-type si inserisce nel tag di apertura di ul:

<ul style="list-style-type:square">
    <li>Prima riga</li>
    <li>Seconda riga</li>
    <li>Terza riga</li>
</ul>

Il risultato sarà cosi:

• Prima riga
• Seconda riga
• Terza riga

Come creare un elenco misto

Noi possiamo anche combinare i vari elenchi per farne uno solo. Per esempio potremmo avere questo tipo di lista:

 I. Prima riga
       • Punto 1
       • Punto 2
II. Seconda riga
       • Punto 1
       • Punto 2
III. Terza riga
       • Punto 1
       • Punto 2

Questo è il codice che ho inserito:

<ol type="I">
    <li>Prima riga</li>
        <ul>
            <li>Punto 1</li>
            <li>Punto 2</li>
        </ul>
    <li>Seconda riga</li>
        <ul>
             <li>Punto 1</li>
             <li>Punto 2</li>
        </ul>           
    <li>Terza riga</li>
        <ul>
             <li>Punto 1</li>
             <li>Punto 2</li>
        </ul>           
</ol>

Puoi vedere quello di cui ti ho parlato su Sololearn e approfondire l’argomento sulla guida di HTML.it.