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 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 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 <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:

<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:

Close

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:

<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>

Close

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:

<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>

Close

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:

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.