Le liste sono uno degli strumenti più versatili e utilizzati nell’HTML. Servono per organizzare informazioni in modo chiaro e strutturato, dai semplici elenchi puntati ai complessi menu di navigazione. L’HTML offre tre tipi di liste, ognuna con caratteristiche e casi d’uso specifici. In questo articolo esploreremo in dettaglio le liste ordinate, non ordinate e di definizione, con esempi pratici e best practice.
Liste Non Ordinate: Il Tag ul
La lista non ordinata (unordered list) è il tipo di lista più utilizzato nel web. Si crea con il tag <ul> e ogni voce è racchiusa nel tag <li> (list item). Il browser visualizza ogni voce con un punto elenco (bullet point) per impostazione predefinita.
La lista non ordinata è appropriata quando l’ordine degli elementi non ha importanza. Esempi tipici includono: elenchi di caratteristiche di un prodotto, liste di ingredienti, elenchi di link in un menu di navigazione, o un insieme di tag e categorie.
La struttura HTML è semplice e intuitiva:
<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>È fondamentale rispettare la regola che il tag <ul> può contenere solo elementi <li> come figli diretti. Qualsiasi altro contenuto deve essere inserito all’interno dei <li>. Inserire testo o altri tag direttamente dentro <ul> senza racchiuderli in <li> genera HTML non valido e può causare comportamenti imprevedibili nella visualizzazione.
Liste Ordinate: Il Tag ol
La lista ordinata (ordered list) si crea con il tag <ol> e, come la lista non ordinata, utilizza il tag <li> per ogni voce. La differenza fondamentale è che gli elementi vengono numerati progressivamente, indicando una sequenza o un ordine di importanza.
Le liste ordinate sono appropriate quando l’ordine ha un significato specifico: istruzioni passo-passo, classifiche, ricette con fasi sequenziali, indici numerati o qualsiasi elenco dove la posizione degli elementi è rilevante.
Il tag <ol> supporta diversi attributi per personalizzare la numerazione:
type— Definisce il tipo di numerazione:1(numeri arabi, predefinito),A(lettere maiuscole),a(lettere minuscole),I(numeri romani maiuscoli),i(numeri romani minuscoli).start— Specifica il numero iniziale della lista. Ad esempio,<ol start="5">inizia la numerazione da 5.reversed— Attributo booleano che inverte l’ordine della numerazione (conto alla rovescia).
Il singolo elemento <li> supporta anche l’attributo value, che permette di impostare un numero specifico per quella voce. I numeri delle voci successive continueranno dal valore impostato.
Liste di Definizione: Il Tag dl
La lista di definizione (definition list) è il tipo di lista meno conosciuto ma estremamente utile per presentare coppie di termini e definizioni. Si crea con il tag <dl>, che contiene tag <dt> (definition term) per i termini e <dd> (definition description) per le definizioni corrispondenti.
Le liste di definizione sono perfette per glossari, FAQ (domanda e risposta), metadati (chiave-valore), specifiche tecniche di prodotti o qualsiasi contenuto che segue il pattern termine-descrizione. La struttura è:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, il linguaggio di markup del web.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, il linguaggio per lo stile delle pagine web.</dd>
</dl>Un <dt> può avere più <dd> associati (un termine con più definizioni), e viceversa più <dt> possono condividere lo stesso <dd> (più termini con la stessa definizione, ad esempio sinonimi). Questa flessibilità rende le liste di definizione adatte a molteplici contesti.
Liste Annidate: Creare Sotto-Elenchi
Una delle caratteristiche più potenti delle liste HTML è la possibilità di annidarle (nesting), creando strutture gerarchiche a più livelli. Per creare una sotto-lista, si inserisce un nuovo <ul> o <ol> all’interno di un elemento <li> della lista padre.
I browser gestiscono automaticamente l’indentazione e cambiano il tipo di bullet point per i diversi livelli di annidamento. Al primo livello si usa tipicamente un disco pieno, al secondo un cerchio vuoto, al terzo un quadrato. Questi stili possono essere personalizzati con CSS.
Un caso d’uso molto comune per le liste annidate sono i menu di navigazione a discesa. La struttura del menu è una lista non ordinata dove ogni voce del menu principale contiene una sotto-lista con le voci del sottomenu. Questa struttura è semanticamente corretta e facilmente stilizzabile con CSS per creare menu dropdown complessi.
Le liste possono anche essere annidate mescolando i tipi: una lista non ordinata può contenere una lista ordinata e viceversa. Questo è utile quando si ha un elenco generico con alcuni elementi che richiedono una sotto-sequenza ordinata, come una guida con passaggi numerati all’interno di sezioni non ordinate.
Stilizzare le Liste con CSS
Il CSS offre numerose proprietà per personalizzare l’aspetto delle liste. La proprietà più importante è list-style-type, che controlla il tipo di marcatore (bullet point o numero) visualizzato accanto a ogni voce. I valori più comuni includono disc, circle, square, decimal, lower-alpha, upper-roman e none (per rimuovere completamente il marcatore).
La proprietà list-style-position determina se il marcatore si trova all’esterno (outside, predefinito) o all’interno (inside) del box dell’elemento. Con inside, il marcatore fa parte del flusso del testo e il testo della seconda riga si allinea sotto il marcatore anziché sotto il testo della prima riga.
Per personalizzazioni più avanzate, è possibile utilizzare list-style-image per sostituire i bullet point con immagini personalizzate, oppure il pseudo-elemento ::marker per stilizzare il marcatore con proprietà CSS come colore, font e dimensione. Un approccio alternativo molto popolare è rimuovere completamente i marcatori con list-style: none e utilizzare i pseudo-elementi ::before per creare marcatori completamente personalizzati con icone o simboli.
Accessibilità e Best Practice
Le liste hanno un ruolo importante nell’accessibilità. Gli screen reader annunciano il tipo di lista e il numero di voci, fornendo all’utente un contesto prezioso. Ad esempio, “Lista non ordinata, 5 elementi” comunica immediatamente la struttura del contenuto. Se rimuovi i marcatori con CSS e usi la lista solo per il layout, l’utente con screen reader potrebbe ricevere informazioni fuorvianti.
In Safari con VoiceOver, le liste con list-style: none non vengono più annunciate come liste. Per risolvere questo problema, puoi aggiungere l’attributo role="list" al tag <ul> o <ol> per ripristinare la semantica di lista anche in assenza di marcatori visivi.
Ecco alcune best practice per l’uso delle liste:
- Usa
<ul>quando l’ordine non conta,<ol>quando conta - Non usare liste solo per indentare il testo — usa il CSS per i margini
- Mantieni le voci della lista concise e parallele nella struttura grammaticale
- Usa le liste di definizione
<dl>per glossari e coppie chiave-valore - Non annidare troppi livelli (più di 3 livelli diventa confuso)
Le liste sono uno strumento semplice ma potente per organizzare il contenuto web. Utilizzarle correttamente migliora la leggibilità, l’accessibilità e la struttura semantica delle tue pagine. Per un approfondimento sui tag HTML più utilizzati, consulta il nostro articolo sui tag HTML essenziali.
Hai bisogno di aiuto con la struttura dei contenuti del tuo sito web? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.