# Liste HTML: elenchi con i tag li, ol e ul

Le liste HTML presentano una selezione di informazioni ed elementi in un documento HTML sotto forma di elenco. A seconda delle esigenze può trattarsi di una lista ordinata o non ordinata oppure di una lista di definizione. Per creare queste liste si usano i tag HTML `<li>`, `<ol>`, `<ul>` e `<dl>`.

## Cosa sono le liste HTML?

Le liste HTML sono usate in [HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml/) per rappresentare informazioni ed elementi di testo **sotto forma di un elenco ordinato**. In base alle necessità è possibile strutturare i contenuti come lista ordinata con numerazione oppure anche come lista non ordinata. Inoltre, a partire da [HTML5](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml5/) con le liste di definizione esiste una terza variante particolarmente adatta per associare i termini e la loro descrizione.

Le liste HTML costituiscono un elemento essenziale per strutturare i siti web in modo chiaro e accattivante, assicurando una **trasmissione precisa, rapida e chiara delle informazioni o dei contenuti**. Può trattarsi di un semplice elenco, di una lista numerata di informazioni o di definizioni presentate in modo ordinato e dettagliato.

## Quali tipi di liste HTML esistono?

Come già menzionato, le liste possono essere rappresentate in forme diverse nei documenti HTML. Mentre le **liste ordinate e non ordinate** sono molto frequenti e non possono mancare in pressoché nessun sito web, le **liste di definizione**, dette anche “description list”, sono molto meno usate. Nei prossimi paragrafi analizziamo più da vicino i diversi tipi di liste HTML e la loro sintassi.

### Liste ordinate (ordered list)

Una lista HTML ordinata è caratterizzata da contenuti ed elementi elencati che puoi ordinare e strutturare nella gerarchia desiderata utilizzando una **sequenza alfanumerica crescente**. Il vantaggio è che le informazioni sono rappresentate in una sequenza chiara e ragionata. A questo scopo si usano il [tag HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-html/) `<ol>` di apertura, il tag `</ol>` di chiusura e più punti `<li>…</li>` per le diverse voci dell’elenco. Le liste ordinate sono adatte ad esempio per rappresentare classifiche, istruzioni o elenchi di domande.

La **sintassi delle liste ordinate** si presenta come segue:

```html
<ol>
<li>Primo punto della lista</li>
<li>Secondo punto della lista</li>
<li>Terzo punto della lista</li>
<li>Quarto punto della lista</li>
<li>…</li>
</ol>
```

Si ottiene il seguente risultato:

[![Immagine: Esempio di lista ordinata](https://www.ionos.it/digitalguide/fileadmin/_processed_/5/1/csm_esempio-risultato-lista-ordinata_9be7ce5d7c.webp "Esempio di lista ordinata")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/esempio-risultato-lista-ordinata.png) Per impostazione predefinita le singole voci della lista ordinata sono numerate.  Consiglio In un altro articolo parleremo in modo ancora più dettagliato del funzionamento delle liste ordinate e delle possibilità che offrono.

### Liste non ordinate (unordered list)

In una lista HTML non ordinata i vari elementi non sono elencati in ordine alfanumerico. Si usano invece **simboli** come punti elenco, trattini, frecce o segni di spunta. In questo modo si possono creare contenuti in modo strutturato, ma senza ordinarli gerarchicamente. Ad esempio, gli ingredienti di una ricetta, città e Paesi o elenchi di nomi. Per creare una lista non ordinata si usano il tag HTML di apertura `<ul>`, il tag di chiusura `</ul>` e vari punti `<li>…</li>`.

La **sintassi delle liste non ordinate** si presenta come segue:

```html
<ul>
<li>Primo punto della lista</li>
<li>Secondo punto della lista</li>
<li>Terzo punto della lista</li>
<li>Quarto punto della lista</li>
<li>…</li>
</ul>
```

[![Immagine: Esempio di lista non ordinata](https://www.ionos.it/digitalguide/fileadmin/_processed_/f/e/csm_esempio-risultato-lista-non-ordinata_f5006ebc06.webp "Esempio di lista non ordinata")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/esempio-risultato-lista-non-ordinata.png) Se non inserisci istruzioni di codice aggiuntive, le liste non ordinate sono visualizzate automaticamente con punti elenco.  Consiglio Trovi informazioni supplementari sulle [liste non ordinate](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/lista-non-ordinata-in-html/) in un articolo dedicato.

### Liste di definizione (description list)

Con una lista di definizione puoi elencare in forma strutturata una serie di **termini e la relativa definizione**, spiegazione o descrizione. Questo tipo di lista HTML è usato in particolare per glossari, elenchi di prodotti e domande frequenti. Per creare una lista di definizione usa i tre componenti seguenti:

- `<dl>…</dl>`: acronimo di “definition list”; definisce l’inizio e la fine della lista
- `<dt>…</dt>`: acronimo di “definition term”; indica il termine da spiegare
- `<dd>…</dd>`: acronimo di “definition description” (dd); indica la descrizione, la definizione o la spiegazione del termine relativo ed è inserito subito dopo il tag `<dt>`.

Le liste di definizione HTML vengono create sulla base della **sintassi** seguente:

```html
<dl>
<dt>Termine 1</dt>
<dd>Descrizione o definizione del termine 1</dd>
<dt>Termine 2</dt>
<dd>Descrizione o definizione del termine 2</dd>
<dt>Termine 3</dt>
<dd>Descrizione o definizione del termine 3</dd>
<dt>…</dt>
<dd>…</dd>
</dl>
```

[![Immagine: Esempio di lista di definizione](https://www.ionos.it/digitalguide/fileadmin/_processed_/d/5/csm_esempio-risultato-lista-di-definizione_b0fcd20004.webp "Esempio di lista di definizione")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/esempio-risultato-lista-di-definizione.png) Un esempio semplice di lista di definizione che elenca i termini e che restituisce nella riga successiva la relativa descrizione o definizione. ## I campi di applicazione delle liste HTML

I campi di applicazione e le possibilità di impiego dei diversi tag di una lista HTML in breve:

<table>
  <thead>
    <tr>
      <th>Lista ordinata</th>
      <th>Lista non ordinata</th>
      <th>Lista di definizione</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Istruzioni</td>
      <td>Vantaggi o svantaggi</td>
      <td>Glossari</td>
    </tr>
    <tr>
      <td>Tutorial</td>
      <td>Menu a discesa e contestuali</td>
      <td>FAQ</td>
    </tr>
    <tr>
      <td>Classifiche</td>
      <td>Raccolte di link</td>
      <td>Elenchi di prodotti</td>
    </tr>
    <tr>
      <td>Confronto</td>
      <td>Fonti e riferimenti</td>
      <td>Categorie</td>
    </tr>
  </tbody>
</table>

## Perché si dovrebbero usare le liste HTML

Con una lista HTML, le informazioni e i contenuti del sito trasmessi sono più strutturati, aumentando l’efficienza. Di seguito alcuni vantaggi delle liste:

- Informazioni più strutturate, chiare e organizzate
- Più varietà e migliore valutazione da parte dei motori di ricerca grazie ai diversi elementi della pagina
- Accessibilità ottimizzata e chiara strutturazione semantica delle pagine per una migliore leggibilità
- Creazione di contenuti visivamente personalizzati, anche in combinazione con gli stili CSS.

Consiglio Nel nostro [tutorial su HTML per principianti](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/imparare-lhtml-lampio-tutorial-per-principianti/) troverai tutte le informazioni importanti per iniziare a usare facilmente questo linguaggio web.


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/liste-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/liste-html/) for AI/LLM consumption.