Condividi questa pagina su:

Liste HTML: elenchi puntati ed elenchi numerati

Le liste HTML sono facili da creare!

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

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?

Ann.

Maggiori informazioni sui canali delle offerte Amazon...

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!

Se vuoi chiedere ulteriori spiegazioni o se vuoi esprimere la tua opinione non esitare a contattarmi!

Ann.

Maggiori informazioni sui canali delle offerte Amazon...

Grazie per avermi letto fin qui!

Fabio Donna

Iscriviti alla Newsletter

...per non perdere le novità, le offerte e nuovi articoli del Blog di altraSoluzione:

Ann.
Ann.
Ann.
Ann.

Ann.

Ann.
Ann.