Liste HTML: <ul>, <ol>, <dl>: quando usare quale
List semantics, description list per glossari/FAQ, attributo type/start
Tre elementi per «un elenco di cose», eppure HTML li tiene distinti perché rispondono a una domanda diversa: l'ordine conta? E se non è un ordine, è forse una coppia termine-descrizione? MDN offre un test semplicissimo per scegliere.
Una lista della spesa è indifferente all'ordine: latte, pane, uova; puoi comprarli in qualunque sequenza, va bene lo stesso. Le istruzioni di una ricetta invece hanno un ordine che conta: se sbatti le uova dopo aver infornato, il risultato cambia. E un glossario non è nessuna delle due cose: è una coppia termine = significato.
1. <ul>: quando l'ordine è irrilevante
<ul> raggruppa elementi la cui posizione nella lista non ha significato. Il test pratico di MDN: prova a cambiare l'ordine degli elementi: se il significato resta uguale, usa <ul>.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Nota tecnica: l'attributo type (per scegliere disco/cerchio/quadrato) è deprecato: MDN raccomanda di usare la proprietà CSS list-style-type al suo posto, lasciando l'HTML a occuparsi solo del significato.
2. <ol>: quando l'ordine è parte del significato
Con <ol>, l'ordine è significativo. Stesso test di prima, risposta opposta: se cambiando l'ordine degli elementi il senso cambia, quella è una lista ordinata.
<ol> <li>Rompi le uova in una ciotola</li> <li>Sbattile con una frusta</li> <li>Versale in padella</li> </ol>
Gli attributi type (numeri, lettere, numeri romani) e start (da quale numero iniziare) restano validi e utili qui — a differenza di <ul>. MDN però consiglia di usarli solo quando il tipo di numerazione conta davvero (documenti legali o tecnici in cui i punti si citano per numero/lettera); altrimenti, anche qui, preferisci il CSS.
<ol type="A" start="3">
<li>Punto C</li>
<li>Punto D</li>
</ol>3. <dl>: quando è una coppia termine → descrizione
Nessuna delle prime due si adatta a un glossario, una FAQ, o un elenco di metadati chiave-valore. Per questo esiste <dl> = description list: racchiude coppie di <dt> (il termine) e <dd> (la sua descrizione).
<dl>
<dt>HTML</dt>
<dd>Il linguaggio di markup standard per le pagine web.</dd>
<dt>CSS</dt>
<dd>Il linguaggio per definire lo stile di una pagina.</dd>
</dl>Un uso ufficiale altrettanto comune: elenchi di metadati (coppie chiave-valore), non solo glossari. MDN avverte anche di non usare <dl> (né <ul>) solo per ottenere una rientranza visiva: è una pratica scorretta che oscura il significato reale della lista di descrizione.
In sintesi
| Tag | Usalo quando | Test rapido |
|---|---|---|
<ul> |
L'ordine degli elementi non ha significato | Cambiando l'ordine, il senso resta uguale? |
<ol> |
L'ordine è parte del significato | Cambiando l'ordine, il senso cambia? |
<dl> |
Coppie termine-descrizione o chiave-valore | È un glossario, una FAQ, o dei metadati? |
Il criterio non è mai «come voglio che appaia», ma «cosa rappresenta davvero questo elenco?». Rispondi a questa domanda, e il tag giusto segue quasi da solo, lasciando poi al CSS il compito di decidere l'aspetto.
Commenti (0)
Registrati per commentare, fare domande e proporre l'argomento della prossima pillola (oppure accedi se hai già un account).
Nessun commento. Sii il primo a scrivere qualcosa.