Liste HTML: elenchi puntati ed elenchi numerati
7 minuti di lettura
Le liste HTML sono facili da creare!
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:
- Primo punto
- Secondo punto
- Terzo punto
- ...
Il codice per creare queste due liste è molto semplice. La lista dev'essere inserita tra i tag di apertura e chiusura che sono
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
<ol>
<li>Primo punto</li>
<li>Secondo punto</li>
<li>Terzo punto</li>
<li>...</li>
</ol>
Semplice vero?
Ann.
349,00 €
Il prezzo, se indicato, è sincronizzato ogni 6 ore. Verificarlo SEMPRE su Amazon PRIMA dell'acquisto!
78,99 €
Il prezzo, se indicato, è sincronizzato ogni 6 ore. Verificarlo SEMPRE su Amazon PRIMA dell'acquisto!
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
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
- Felpe da uomo
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
Il valore predefinito è "
<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>
- Primo punto
- Secondo punto
- ...
...o sostituirli con delle lettere:
<ol style="list-style: lower-alpha;">
<li>Primo punto</li>
<li>Secondo punto</li>
<li>...</li>
</ol>
- Primo punto
- Secondo punto
- ...
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
Grazie per avermi letto fin qui!