Guida HTML interattiva: Liste

Q: Come si crea un elenco puntato in HTML?

Usa una lista non ordinata: con un per ogni punto, per esempio Milk Eggs . Il browser disegna un punto prima di ogni voce e fa rientrare la lista.

Q: Come tolgo i punti elenco da una lista in HTML?

Imposta list-style: none sull' in CSS. Imposta anche padding-inline-start: 0 (o padding: 0) per togliere il rientro che il browser aggiunge per i punti.

Q: Come faccio iniziare un elenco numerato da un altro numero?

Usa l'attributo start: numera la prima voce con 5. reversed conta invece all'indietro, e value su un imposta il numero di quella voce e di quelle successive.

Q: Come si crea una lista annidata in HTML?

Metti l' o l' interno dentro un della lista esterna, dopo il testo di quella voce. Una lista messa direttamente dentro un altro , tra elementi , non è valida.

Liste HTML: ul, ol e li

L'HTML ha due liste principali. <ul> (unordered list, lista non ordinata) mostra punti elenco, e <ol> (ordered list, lista ordinata) mostra numeri. Ogni voce è un <li> (list item).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

Usa <ol> quando l'ordine ha un significato (passaggi, classifiche, un indice) e <ul> quando non ce l'ha. Gli screen reader annunciano entrambe come liste con il numero di voci, per esempio "elenco, 3 elementi", ed è per questo che una vera lista è meglio di righe che iniziano con un "•" o un "1." scritto a mano.

Una lista può contenere direttamente solo elementi <li>. Tutto il resto, compresi titoli, paragrafi e altre liste, va dentro un <li>.

Stili dei punti elenco

list-style-type sull'<ul> cambia il punto elenco. Lo pseudo-elemento ::marker dà uno stile al punto o al numero stesso, separatamente dal testo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

Un valore di tipo stringa usa quel testo come punto elenco. "\2713 " è un segno di spunta seguito da uno spazio: il primo spazio serve solo a chiudere l'escape \2713. ::marker accetta poche proprietà, soprattutto color, font-size e le altre proprietà dei font, che bastano per la classica richiesta dei "punti colorati" senza markup in più.

Liste ordinate: numeri, lettere e numeri romani

<ol> ha degli attributi per la numerazione:

Attributo	Esempio	Risultato
`type`	`type="a"`	a, b, c (funzionano anche `A`, `i`, `I` e `1`)
`start`	`start="5"`	Inizia a contare da 5
`reversed`	`reversed`	Conta all'indietro
`value` (su `<li>`)	`<li value="10">`	Questa voce è 10, le successive continuano da lì

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type va bene in HTML perché le lettere possono avere un significato ("scegli l'opzione B"). Per cambiamenti solo visivi, list-style-type: upper-alpha o lower-roman in CSS fa la stessa cosa.

Liste annidate

Una sottolista va dentro il <li> a cui appartiene, dopo il testo di quella voce. I browser cambiano il punto elenco a ogni livello: disco, poi cerchio, poi quadrato.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

Fai attenzione a dove va </li>: la voce "Frontend" si chiude solo dopo la sua sottolista. Chiuderla prima dell'<ul> mette la sottolista direttamente dentro l'<ul> esterno, cosa non valida anche se l'aspetto è quasi uguale.

Le liste ordinate si annidano allo stesso modo, e in ogni sottolista la numerazione riparte da 1. Per numeri come 1.1 e 1.2 servono i contatori CSS.

Liste di descrizione: dl, dt e dd

Una lista di descrizione abbina termini e descrizioni: un glossario, i dettagli di un ordine, coppie simili a delle FAQ. <dt> è il termine e <dd> la descrizione:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

Un termine può avere più <dd>, e più <dt> possono condividere un <dd>. I browser fanno rientrare <dd> per impostazione predefinita; la regola margin qui sopra toglie il rientro. Per dati con più colonne è più adatta una tabella.

I menu di navigazione sono liste di link. Togli i punti con list-style: none e il rientro con padding: 0, poi disponi le voci in riga con flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

Per gli screen reader la lista resta una lista ("navigazione, elenco, 3 elementi"). Un'eccezione: Safari con VoiceOver può perdere il significato di lista quando i punti vengono tolti. Se il numero di voci conta per i tuoi utenti, aggiungi role="list" all'<ul>.

Spaziatura predefinita

I browser danno alle liste un margine sopra e sotto di 1em e le fanno rientrare con padding-inline-start: 40px, che è lo spazio dove stanno i punti. Il padding è sul lato iniziale, quindi nelle lingue da destra a sinistra punti e rientro passano automaticamente all'altro lato. Togli il padding e i punti finiscono fuori dal riquadro della lista, dove possono venire tagliati; lascia un po' di padding oppure usa list-style-position: inside.

Errori comuni

<li> senza una lista genitore. Deve stare dentro <ul>, <ol> o <menu>.
Una lista annidata fuori dal suo <li>. Metti la sottolista dentro la voce a cui appartiene.
Testo o altri tag direttamente dentro <ul>, come <ul><p>Note</p><li>...</li></ul>. Spostali in un <li> o fuori dalla lista.
Scrivere punti o numeri a mano con • e <br>. Gli screen reader sentono un paragrafo, non una lista.
list-style: none senza padding: 0, che lascia un misterioso rientro di 40 pixel.
Usare <ol> per l'aspetto. Se l'ordine non conta, usa <ul> e dagli uno stile.

Domande frequenti

Come si crea un elenco puntato in HTML?

Usa una lista non ordinata: <ul> con un <li> per ogni punto, per esempio <ul><li>Milk</li><li>Eggs</li></ul>. Il browser disegna un punto prima di ogni voce e fa rientrare la lista.

Che differenza c'è tra ul e ol?

<ul> è una lista non ordinata, mostrata con punti, per voci il cui ordine non conta. <ol> è una lista ordinata, mostrata con numeri, per passaggi e classifiche in cui l'ordine conta. Entrambe contengono voci <li>.

Come tolgo i punti elenco da una lista in HTML?

Imposta list-style: none sull'<ul> in CSS. Imposta anche padding-inline-start: 0 (o padding: 0) per togliere il rientro che il browser aggiunge per i punti.

Come faccio iniziare un elenco numerato da un altro numero?

Usa l'attributo start: <ol start="5"> numera la prima voce con 5. reversed conta invece all'indietro, e value su un <li> imposta il numero di quella voce e di quelle successive.

Come si crea una lista annidata in HTML?

Metti l'<ul> o l'<ol> interno dentro un <li> della lista esterna, dopo il testo di quella voce. Una lista messa direttamente dentro un altro <ul>, tra elementi <li>, non è valida.

Concetti correlati