Condividi questa pagina su:
altraSoluzione piace a:

Liste HTML: elenchi puntati ed elenchi numerati

Stampa Stampa

Le liste HTML sono facili da creare! Smile

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? Smile

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! Smile

Se vuoi chiedere ulteriori spiegazioni o se vuoi esprimere la tua opinione, non esitare a farlo lasciando un commento Facebook, oppure contattandomi in privato!

Grazie per avermi letto fin qui! Smile

E non dimenticare di mettere il tuo "Mi piace" qui sotto! Smile

Fabio Donna

Amazon Business
Prova subito SEOZoom!

Commenti Facebook

N.B.: i commenti devono essere approvati prima della pubblicazione, quindi potrebbero non apparire subito.