Liste HTML: elenchi puntati ed elenchi numerati

Gli elenchi puntati e gli elenchi numerati sono una delle cose più semplici da realizzare in HTML ma, nonostante la semplicità, sono spesso avvolti da un alone di mistero.

Infatti, spesso mi è stato chiesto come realizzarli, come aggiungere livelli nidificati (nested), come cambiarne l'aspetto e tante altre info.

Ecco perché ho deciso di scrivere questa breve guida che può essere utile a tutte quelle persone che muovono i primi passi nel mondo dell'HTML e del CSS.

In questo articolo:

• Cosa sono gli elenchi puntati e gli elenchi numerati
• Le liste nidificate
• Come modificare gli stili delle liste

Cosa sono gli elenchi puntati e gli elenchi numerati

Gli elenchi puntati (ul = unordered list = lista non ordinata) e gli elenchi numerati (ol = ordered list = lista ordinata) sono utilizzati moltissimo in HTML in tutte quelle occasioni in cui è necessario creare delle liste, conferendogli un aspetto gradevole. Ma possono essere utilizzati anche per creare i menu e in tutte quelle occasioni in cui è necessario stabilire una "gerarchia" degli oggetti in una pagina Web.

Ecco subito un esempio di elenco puntato:

• Primo punto
• Secondo punto
• Terzo punto
• ...

Ed ecco un elenco numerato:

1. Primo punto
2. Secondo punto
3. Terzo punto
4. ...

Il codice per creare queste due liste è molto semplice. La lista dev'essere inserita tra i tag di apertura e chiusura che sono <ul> e </ul> per l'elenco puntato e <ol> e </ol> per l'elenco numerato mentre i tag per racchiudere ogni singolo punto dell'elenco, in entrambi i casi sono <li> e </li>.

Quindi, il codice HTML per costruire l'elenco puntato è:

  <ul>
    <li>Primo punto</li>
    <li>Secondo punto</li>
    <li>Terzo punto</li>
    <li>...</li>
  </ul>
  

Il codice HTML per l'elenco numerato è pressoché identico, cambia soltanto il tag del "contenitore" da <ul> e </ul> a <ol> e </ol>. Il browser si occuperà di numerare i punti nella lista automaticamente:

  <ol>
    <li>Primo punto</li>
    <li>Secondo punto</li>
    <li>Terzo punto</li>
    <li>...</li>
  </ol>
  

Semplice vero?

Le liste nidificate

Ma cosa succede se voglio una lista che si sviluppi "ad albero", su diversi livelli?

In realtà non cambia molto e l'unica cosa a cui bisogna stare attenti è di aprire e chiudere i tag <li> e </li> nei punti giusti.

Come esempio, vogliamo creare una lista simile a questa:

• Scarpe
  • Scarpe da uomo
  • Scarpe da donna
  • Scarpe da bambino
• Cappelli
  • Cappelli da uomo
  • Cappelli da donna
  • Cappelli da bambino
• Felpe
  • Felpe da uomo
  • Felpe da donna
  • Felpe da bambino

Il codice HTML necessario è:

  <ul>
    <li>Scarpe
      <ul>
        <li>Scarpe da uomo</li>
        <li>Scarpe da donna</li>
        <li>Scarpe da bambino</li>
      </ul>
    </li>
    <li>Cappelli
      <ul>
        <li>Cappelli da uomo</li>
        <li>Cappelli da donna</li>
        <li>Cappelli da bambino</li>
      </ul>
    </li>
    <li>Felpe
      <ul>
        <li>Felpe da uomo</li>
        <li>Felpe da donna</li>
        <li>Felpe da bambino</li>
      </ul>
    </li>
  </ul>
  

Anche se al browser non interessa che il codice sia ben incolonnato ma soltanto che i tag siano correttamente aperti e chiusi, è sempre bene essere ordinati quando si scrive codice di questo tipo, altrimenti diventa difficile ricordarsi di chiudere i tag aperti.

Nel codice precedente, per il primo punto, ho usato lo stesso colore per i tag di apertura e chiusura corrispondenti, in modo da rendere più chiaro il concetto.

Come puoi vedere, ogni tag che non è chiuso sulla stessa linea dov'è stato aperto è allineato in verticale con il suo tag di chiusura. In questo modo è molto più semplice notare le corrispondenze.

Sperando che il modo di utilizzare i tag per gli elenchi sia chiaro, è bene sapere che si possono "ramificare" le liste all'infinito.
Per fare un esempio semplice, prendiamo soltanto il "ramo" delle felpe ed espandiamolo ulteriormente, aggiungendo le taglie in una ulteriore ramificazione:

• Felpe
  • Felpe da uomo
    • Taglia S
    • Taglia M
    • Taglia L
    • Taglia XL
  • Felpe da donna
    • Taglia XS
    • Taglia S
    • Taglia M
    • Taglia L
  • Felpe da bambino
    • Taglia 74
    • Taglia 80
    • Taglia 86

Questo è il codice HTML che genera l'elenco:

  <ul>
    <li>Felpe
      <ul>
        <li>Felpe da uomo
          <ul>
            <li>Taglia S</li>
            <li>Taglia M</li>
            <li>Taglia L</li>
            <li>Taglia XL</li>
          </ul>
        </li>
        <li>Felpe da donna
          <ul>
            <li>Taglia XS</li>
            <li>Taglia S</li>
            <li>Taglia M</li>
            <li>Taglia L</li>
          </ul>
        </li>
        <li>Felpe da bambino
          <ul>
            <li>Taglia 74</li>
            <li>Taglia 80</li>
            <li>Taglia 86</li>;
          </ul>
        </li>
      </ul>
    </li>
  </ul>  
  

Come puoi vedere, si tratta di ripetere la stessa struttura nelle diverse ramificazioni, nulla di più.

Come modificare gli stili delle liste

Usando i CSS puoi modificare l'aspetto delle liste e ti mostrerò alcuni esempi di risultati diversi da quello standard mostrato in precedenza.

Per cambiare forma della "bullet" (il punto) negli elenchi puntati, puoi utilizzare il codice CSS list-style nel tag <ul>:

Il valore predefinito è "disc", che mostra il "pallino" pieno che abbiamo visto negli esempi precedenti ma, impostandolo su "square" si ottiene questo:

  <ul style="list-style: square;">
    <li>Primo punto</li>
    <li>Secondo punto</li>
    <li>...</li>
  </ul> 
  

• Primo punto
• Secondo punto
• ...

Per ottenere un cerchio vuoto si può utilizzare "list-style: circle;":

  <ul style="list-style: circle;">
    <li>Primo punto</li>
    <li>Secondo punto</li>
    <li>...</li>
  </ul> 
  

• Primo punto
• Secondo punto
• ...

Si può anche utilizzare un'immagine personalizzata con il codice "list-style-image: url('/percorso/immagine.png');":

  <ul style="list-style-image: url('/images/icons/check.png');">
    <li>Primo punto</li>
    <li>Secondo punto</li>
    <li>...</li>
  </ul> 
  

• Primo punto
• Secondo punto
• ...

Nelle liste numerate è possibile anche cambiare il formato dei numeri:

  <ol style="list-style: upper-roman;">
    <li>Primo punto</li>
    <li>Secondo punto</li>
    <li>...</li>
  </ol> 
  

1. Primo punto
2. Secondo punto
3. ...

...o sostituirli con delle lettere:

  <ol style="list-style: lower-alpha;">
    <li>Primo punto</li>
    <li>Secondo punto</li>
    <li>...</li>
  </ol> 
  

1. Primo punto
2. Secondo punto
3. ...

Insomma, con poco sforzo si possono ottenere risultati molto gradevoli e adatti a quasi tutte le situazioni. Basta un po' di fantasia!

Grazie per avermi letto fin qui!

Fabio Donna