Tag HTML <ul>
Il tag HTML <ul> definisce un elenco non ordinato. Scopri sintassi, annidamento e stilizzazione con esempi pratici.
Il tag HTML <ul> viene utilizzato per specificare un elenco non ordinato, che raggruppa una collezione di elementi privi di ordine numerico. Cambiando l'ordine degli elementi dell'elenco, il significato non cambia. Di solito, gli elementi di un elenco non ordinato vengono visualizzati con un punto elenco, che può assumere forme diverse come un cerchio, un punto o un quadrato.
Ogni elemento di un elenco non ordinato viene dichiarato all'interno del tag <li>.
Il tag <ul> è un elemento a livello di blocco e occupa tutto lo spazio orizzontale disponibile. La sua altezza dipende dal contenuto all'interno del contenitore. Un elenco non ordinato viene tipicamente visualizzato come un elenco puntato.
Anche il tag <ol> rappresenta un elenco di elementi e crea un elenco ordinato. Si differenzia da <ul> perché nel tag <ol> l'ordine è significativo. Per impostazione predefinita, gli elementi di un elenco ordinato vengono visualizzati con i numeri.
I tag <ul> e <ol> possono essere annidati in modo arbitrariamente profondo. Gli elenchi annidati possono alternarsi tra <ul> e <ol>. Tuttavia, occorre considerare che nel caso di un elenco annidato all'interno di un altro, l'elenco interno deve essere inserito all'interno di un elemento <li> dell'elenco esterno. Ciò significa che il figlio diretto di un elenco deve essere un elemento <li>, ma tale elemento <li> può contenere un altro elenco. È possibile cambiare il marcatore degli elementi dell'elenco con CSS. Tuttavia, il significato semantico espresso dalla scelta di un tipo di elenco non può essere modificato con CSS.
Sintassi
Il tag <ul> va in coppia. Il contenuto viene scritto tra il tag di apertura (<ul>) e quello di chiusura (</ul>).
Esempio del tag HTML <ul>:
Esempio del tag HTML <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Elenchi annidati
Gli elenchi vengono spesso annidati per esprimere una gerarchia — ad esempio un menu con sottovoci. Per annidare un elenco, inserire il <ul> interno all'interno di un <li> dell'elenco esterno, non direttamente all'interno del <ul> esterno. Il figlio diretto di un <ul> deve essere sempre un <li>.
Esempio di <ul> annidato
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>
Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>I browser cambiano automaticamente il marcatore di punto elenco a ogni livello di annidamento (disco, poi cerchio, poi quadrato), rendendo la gerarchia facile da leggere.
Stilizzare l'elenco con CSS
Gli attributi storici type e compact sono obsoleti in HTML5 — non utilizzarli. Il metodo moderno e semantico per cambiare il marcatore di punto elenco è la proprietà CSS list-style-type (oppure list-style-image per un'immagine personalizzata). Mantenere il marcatore in CSS separa la presentazione dalla struttura: l'elenco significa comunque "elenco non ordinato" indipendentemente da come viene stilizzato.
Esempio di <ul> stilizzato con la proprietà CSS list-style-type:
Esempio del tag HTML <ul> con la proprietà CSS list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul.square {
list-style-type: square;
}
ul.circle {
list-style-type: circle;
}
ul.none {
list-style-type: none;
}
</style>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul class="square">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul class="circle">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul class="none">
<li>No marker</li>
<li>No marker</li>
</ul>
</body>
</html>Menu di navigazione
L'uso più comune di <ul> nel mondo reale è un menu di navigazione. Racchiudere l'elenco in un elemento <nav> lo contrassegna come punto di riferimento per la navigazione, e l'elenco comunica comunque alle tecnologie assistive che "questi elementi formano un gruppo". I punti elenco vengono solitamente rimossi con CSS.
Esempio di menu di navigazione costruito con <nav> e <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</body>
</html>Accessibilità
I lettori di schermo trattano un <ul> come un elenco: annunciano l'inizio di un elenco, leggono il numero di elementi che contiene (ad esempio "elenco, 3 elementi") e leggono ogni elemento in ordine. Questo conteggio degli elementi è un contesto utile per gli utenti non vedenti, quindi è preferibile utilizzare il markup reale <ul>/<li> invece di una serie di elementi <div> stilizzati.
C'è un'importante avvertenza. In Safari con VoiceOver, applicare list-style: none (come si fa tipicamente per i menu di navigazione) rimuove la semantica dell'elenco — VoiceOver non lo annuncia più come un elenco. Se il ruolo dell'elenco è importante in quel contesto, ripristinarlo esplicitamente:
<ul role="list" style="list-style: none;">
<li>Home</li>
<li>About</li>
</ul>Attributi
Il tag <ul> non ha attributi specifici dell'elemento nello standard HTML attuale. (I vecchi attributi type e compact sono obsoleti — usare CSS al loro posto.) Supporta solo gli attributi globali e gli attributi evento.
Tag e argomenti correlati
<li>— definisce ogni elemento dell'elenco.<ol>— crea un elenco ordinato (numerato).- Elenchi HTML — panoramica di tutti i tipi di elenco in HTML.
- CSS
list-style-type— controlla il marcatore di punto elenco.