Liste HTML
In HTML esistono tre tipi principali di liste: non ordinate, ordinate e di descrizione. Ognuna si definisce con tag diversi
In HTML esistono tre tipi di liste: non ordinate, ordinate e di descrizione. Ognuna si definisce con tag diversi. Vediamole nel dettaglio.
Liste non ordinate in HTML
Le liste non ordinate vengono utilizzate per raggruppare elementi che non hanno un ordine numerico. Cambiando l'ordine delle voci, il significato non cambia. Per creare una lista non ordinata si usa il tag <ul>. Questo tag va in coppia: il contenuto è scritto tra il tag di apertura <ul> e quello di chiusura </ul>.
Ogni elemento di una lista non ordinata è dichiarato all'interno del tag <li>.
Esempio del tag HTML <ul> per creare una lista non ordinata:
Un esempio di lista non ordinata|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An unordered list:</h1>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is one more list item</li>
</ul>
</body>
</html>Gli elementi delle liste non ordinate sono contrassegnati da punti elenco (piccoli cerchi neri) per impostazione predefinita. Il vecchio attributo type (type="circle", type="square") poteva cambiare lo stile del punto elenco, ma è deprecato in HTML5. Al suo posto usa la proprietà CSS list-style-type — è il modo moderno e supportato per controllare i marcatori sia per le liste non ordinate che per quelle ordinate. La mappa di migrazione completa dai vecchi valori type ai valori CSS è nella sezione sulle liste ordinate qui sotto.
Esempio del tag HTML <ul> per creare una lista non ordinata con elementi contrassegnati da punti elenco:
Esempio dell'attributo type per le liste HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul type="circle">
<li>List item </li>
<li>List item</li>
<li>List item</li>
</ul>
<ul type="square">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Risultato
Puoi anche usare la proprietà CSS list-style-type o list-style-image per specificare il tipo di marcatore dell'elemento di lista.
Esempio del tag HTML <ul> usato con la proprietà CSS list-style-type per creare una lista non ordinata:
Esempio della proprietà list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul style="list-style-type: square;">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul style="list-style-type: disc;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul style="list-style-type: circle;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
</body>
</html>Liste ordinate in HTML
La lista ordinata HTML viene utilizzata per elencare elementi contrassegnati da numeri. Inizia con il tag <ol>. Questo tag va in coppia: il contenuto è scritto tra il tag di apertura <ol> e quello di chiusura </ol>.
Ogni elemento della lista ordinata inizia con il tag di apertura <li> e termina con il tag di chiusura </li>.
Esempio del tag HTML <ol> per creare una lista ordinata:
Esempio di una lista ordinata HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An ordered list:</h1>
<ol>
<li>This is List item number 1</li>
<li>This is List item number 2</li>
<li>This is List item number 3</li>
</ol>
</body>
</html>Gli elementi di una lista ordinata sono contrassegnati da numeri per impostazione predefinita. Per numerarli con lettere o numeri romani, il vecchio metodo era aggiungere type="a" o type="I" al tag <ol>. Quell'attributo type funziona ancora nei browser ma è deprecato in HTML5, quindi nel codice nuovo preferisci la proprietà CSS list-style-type.
Migrazione dell'attributo type deprecato verso CSS
Ogni vecchio valore type corrisponde direttamente a un valore CSS di list-style-type:
| Attributo deprecato | CSS equivalente | Esempio di output |
|---|---|---|
type="1" | list-style-type: decimal; | 1, 2, 3 |
type="A" | list-style-type: upper-alpha; | A, B, C |
type="a" | list-style-type: lower-alpha; | a, b, c |
type="I" | list-style-type: upper-roman; | I, II, III |
type="i" | list-style-type: lower-roman; | i, ii, iii |
Il primo esempio qui sotto usa l'attributo type deprecato in modo da poter vedere tutti gli stili di marcatore in un colpo d'occhio; nel codice di produzione, imposta invece il valore equivalente di list-style-type dalla tabella.
Esempio del tag HTML <ol> per creare una lista ordinata con lettere e numeri romani:
Esempio di diversi marcatori per gli elementi di lista
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>A numbered list:</h3>
<ol>
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list:</h3>
<ol type="A">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list (lowercase letters):</h3>
<ol type="a">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (Roman numerals):</h3>
<ol type="I">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (lowercase Roman numerals):</h3>
<ol type="i">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
</body>
</html>Liste di descrizione in HTML
Le liste di descrizione HTML vengono utilizzate per abbinare termini alle loro definizioni, in modo simile a un dizionario o glossario.
Per creare una lista di descrizione si usa il tag <dl>. Questo tag va in coppia.
All'interno di <dl>, si usano i tag <dt> per il termine/nome nella lista di descrizione e <dd> per la descrizione del termine/nome.
Esempio del tag HTML <dl> per creare una lista di descrizione:
Esempio di una lista di descrizione|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Description Lists:</h1>
<dl>
<dt>Tea</dt>
<dd>hot drink</dd>
<dt>Juice</dt>
<dd>cold drink</dd>
</dl>
</body>
</html>Risultato
Quando usare <dl> invece di un <ul> di coppie
Ricorri a una lista di descrizione quando i tuoi dati sono genuinamente un insieme di coppie nome/valore (termine/definizione): voci di glossario, metadati chiave-valore (autore, data di pubblicazione, categoria), coppie domanda/risposta per le FAQ o dialoghi. L'elemento <dl> rende esplicita questa relazione nel markup, che le tecnologie assistive possono comunicare.
Se i tuoi elementi sono semplicemente una sequenza piatta senza struttura a coppie, un semplice <ul> è la scelta giusta. Non simulare l'abbinamento chiave/valore alternando elementi <li> all'interno di un <ul> — questo elimina l'associazione semantica tra il termine e la sua descrizione.
Un singolo <dt> può essere seguito da più elementi <dd> (un termine, più descrizioni), e più elementi <dt> possono condividere un singolo <dd> (più termini con la stessa definizione). Entrambi sono validi:
<dl>
<dt>Coffee</dt>
<dt>Espresso</dt>
<dd>A hot caffeinated drink.</dd>
<dt>Water</dt>
<dd>A drink with no calories.</dd>
<dd>Also used for cooking and cleaning.</dd>
</dl>Uso improprio comune: il <dl> è stato un tempo usato in modo improprio esclusivamente per la sua indentazione predefinita. Non usarlo mai per la sola indentazione visiva — usa margin/padding di CSS per quello. Usa <dl> solo quando il contenuto è effettivamente dati di tipo termine/descrizione. Consulta le pagine dedicate a <dl>, <dt> e <dd> per maggiori dettagli.
Liste annidate in HTML
Una lista annidata contiene una lista all'interno di un'altra lista.
Esempio di una lista annidata HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A nested HTML list</h2>
<p>A nested list contains a list inside a list.</p>
<ul>
<li>Copybooks</li>
<li>
Books
<ul>
<li>Detective books</li>
<li>Roman books</li>
<li>Fairy tale books</li>
</ul>
</li>
</ul>
</body>
</html>La lista annidata deve essere posizionata all'interno di un elemento <li>, non direttamente tra gli elementi <li> del genitore — un <ul>/<ol> non è un figlio diretto valido di un altro <ul>/<ol>.
Puoi mescolare i tipi di lista: una lista ordinata può essere annidata all'interno di una lista non ordinata, e viceversa. I browser indentano automaticamente ogni livello annidato (tramite il padding sinistro predefinito su <ul>/<ol>) in modo che la gerarchia risulti chiara.
Esempio di una lista annidata mista (lista ordinata all'interno di una lista non ordinata):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Shopping list</h2>
<ul>
<li>Fruit</li>
<li>
Drinks, in order of preference:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
</ol>
</li>
<li>Bread</li>
</ul>
</body>
</html>Controllo del conteggio nelle liste
Per impostazione predefinita, una lista ordinata numera gli elementi a partire da 1. Tre attributi ti permettono di modificare questo comportamento:
start(su<ol>) — il numero da cui la lista inizia a contare.reversed(su<ol>) — conta in ordine decrescente anziché crescente.value(su un<li>specifico) — imposta manualmente il numero di quell'elemento; gli elementi seguenti continuano da quel punto.
Usare start per continuare una lista attraverso le sezioni
L'attributo start è particolarmente utile quando una singola lista logica è suddivisa da titoli, immagini o paragrafi. Ad esempio, se la prima sezione termina al passo 39, i passi nella seconda sezione continuano con <ol start="40"> in modo che la numerazione rimanga corretta attraverso l'interruzione.
Esempio di una lista HTML che conta a partire da un numero specificato:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>List counting control</h2>
<p>Continuing a procedure whose first section ended at step 39.</p>
<ol start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
<ol type="I" start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
</body>
</html>Esempio di reversed e value:
L'attributo reversed numera la lista dall'alto verso il basso — utile per i conto alla rovescia o le classifiche "top N" mostrate dal peggiore al migliore. L'attributo value su un singolo <li> fa saltare il conteggio a un numero specifico, e gli elementi successivi continuano da lì.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A reversed list (countdown)</h2>
<ol reversed>
<li>Bronze medal</li>
<li>Silver medal</li>
<li>Gold medal</li>
</ol>
<h2>Setting an item's number with value</h2>
<ol>
<li>First</li>
<li value="5">Jumps to 5</li>
<li>Continues at 6</li>
</ol>
</body>
</html>La lista invertita qui sopra viene visualizzata come 3. Bronze medal, 2. Silver medal, 1. Gold medal. Nella seconda lista, il secondo elemento è forzato a 5, quindi il terzo elemento mostra 6.
Accessibilità delle liste HTML
Le liste hanno un significato per le tecnologie assistive, non solo per lo stile visivo. Quando uno screen reader raggiunge un <ul>, <ol> o <dl>, annuncia il ruolo della lista e di solito il numero di elementi (ad esempio, "lista, 3 elementi"), poi annuncia la posizione di ciascun elemento. Questo contesto aiuta gli utenti che non possono vedere i punti elenco o i numeri a comprendere la struttura, quindi scegliere il tipo di lista corretto è anche una decisione di accessibilità.
Alcune linee guida pratiche:
- Rimuovere i marcatori può rimuovere la semantica della lista. In Safari con VoiceOver, applicare
list-style: none(comune per i menu di navigazione e le liste con stile personalizzato) può fare in modo che il browser elimini il ruolo implicito della lista, così la lista non viene più annunciata come tale. Per mantenere la semantica, aggiungi unrole="list"esplicito:
<ul role="list" style="list-style: none;">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>- Racchiudi le liste di navigazione in
<nav>. Un menu di un sito è convenzionalmente una lista di link all'interno di un landmark<nav>. Il<nav>espone un landmark di navigazione a cui gli utenti di screen reader possono saltare direttamente, mentre l'interno<ul>mantiene gli elementi raggruppati e contati.
<nav aria-label="Main">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>- Usa
<ol>quando l'ordine è significativo (passi, classifiche, istruzioni) e<ul>quando non lo è — gli screen reader annunciano le posizioni nelle liste ordinate, quindi la distinzione viene comunicata agli utenti, non solo mostrata visivamente.
Lista orizzontale con CSS
Le liste HTML possono essere formattate in molti modi diversi con CSS.
Puoi stilizzare le liste HTML usando diverse proprietà CSS. Ad esempio, puoi creare un menu di navigazione impostando list-style-type: none per rimuovere i punti elenco e display: flex per disporre gli elementi in fila.
I colori qui sotto sono scritti come valori esadecimali letterali per rendere l'esempio autonomo; in un progetto reale faresti normalmente riferimento alle variabili di colore del tuo design system (proprietà personalizzate CSS) invece di codificare i valori esadecimali.
Esempio di una lista orizzontale con CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
background-color: #F44336;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #981816;
}
</style>
</head>
<body>
<h2>Navigation Menu Example</h2>
<p>
You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
</p>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="https://www.w3docs.com/tool/">Tools</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets">Snippets</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz/">Quizzes</a>
</li>
<li>
<a href="https://www.w3docs.com/string-functions/">String Functions</a>
</li>
</ul>
</body>
</html>