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

Le liste HTML pre­sen­ta­no una selezione di in­for­ma­zio­ni 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 de­fi­ni­zio­ne. 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 rap­pre­sen­ta­re in­for­ma­zio­ni ed elementi di testo sotto forma di un elenco ordinato. In base alle necessità è possibile strut­tu­ra­re i contenuti come lista ordinata con nu­me­ra­zio­ne oppure anche come lista non ordinata. Inoltre, a partire da HTML5 con le liste di de­fi­ni­zio­ne esiste una terza variante par­ti­co­lar­men­te adatta per associare i termini e la loro de­scri­zio­ne.

Le liste HTML co­sti­tui­sco­no un elemento es­sen­zia­le per strut­tu­ra­re i siti web in modo chiaro e ac­cat­ti­van­te, as­si­cu­ran­do una tra­smis­sio­ne precisa, rapida e chiara delle in­for­ma­zio­ni o dei contenuti. Può trattarsi di un semplice elenco, di una lista numerata di in­for­ma­zio­ni o di de­fi­ni­zio­ni pre­sen­ta­te in modo ordinato e det­ta­glia­to.

Quali tipi di liste HTML esistono?

Come già men­zio­na­to, le liste possono essere rap­pre­sen­ta­te 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 de­fi­ni­zio­ne, dette anche “de­scrip­tion list”, sono molto meno usate. Nei prossimi paragrafi ana­liz­zia­mo più da vicino i diversi tipi di liste HTML e la loro sintassi.

Liste ordinate (ordered list)

Una lista HTML ordinata è ca­rat­te­riz­za­ta da contenuti ed elementi elencati che puoi ordinare e strut­tu­ra­re nella gerarchia de­si­de­ra­ta uti­liz­zan­do una sequenza al­fa­nu­me­ri­ca crescente. Il vantaggio è che le in­for­ma­zio­ni sono rap­pre­sen­ta­te 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 rap­pre­sen­ta­re clas­si­fi­che, istru­zio­ni 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 al­fa­nu­me­ri­co. Si usano invece simboli come punti elenco, trattini, frecce o segni di spunta. In questo modo si possono creare contenuti in modo strut­tu­ra­to, ma senza ordinarli ge­rar­chi­ca­men­te. Ad esempio, gli in­gre­dien­ti 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 de­fi­ni­zio­ne (de­scrip­tion list)

Con una lista di de­fi­ni­zio­ne puoi elencare in forma strut­tu­ra­ta una serie di termini e la relativa de­fi­ni­zio­ne, spie­ga­zio­ne o de­scri­zio­ne. Questo tipo di lista HTML è usato in par­ti­co­la­re per glossari, elenchi di prodotti e domande frequenti. Per creare una lista di de­fi­ni­zio­ne usa i tre com­po­nen­ti seguenti:

• <dl>…</dl>: acronimo di “de­fi­ni­tion list”; definisce l’inizio e la fine della lista
• <dt>…</dt>: acronimo di “de­fi­ni­tion term”; indica il termine da spiegare
• <dd>…</dd>: acronimo di “de­fi­ni­tion de­scrip­tion” (dd); indica la de­scri­zio­ne, la de­fi­ni­zio­ne o la spie­ga­zio­ne del termine relativo ed è inserito subito dopo il tag <dt>.

Le liste di de­fi­ni­zio­ne 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 ap­pli­ca­zio­ne delle liste HTML

I campi di ap­pli­ca­zio­ne e le pos­si­bi­li­tà di impiego dei diversi tag di una lista HTML in breve:

Perché si do­vreb­be­ro usare le liste HTML

Con una lista HTML, le in­for­ma­zio­ni e i contenuti del sito trasmessi sono più strut­tu­ra­ti, au­men­tan­do l’ef­fi­cien­za. Di seguito alcuni vantaggi delle liste:

• In­for­ma­zio­ni più strut­tu­ra­te, chiare e or­ga­niz­za­te
• Più varietà e migliore va­lu­ta­zio­ne da parte dei motori di ricerca grazie ai diversi elementi della pagina
• Ac­ces­si­bi­li­tà ot­ti­miz­za­ta e chiara strut­tu­ra­zio­ne semantica delle pagine per una migliore leg­gi­bi­li­tà
• Creazione di contenuti vi­si­va­men­te per­so­na­liz­za­ti, anche in com­bi­na­zio­ne con gli stili CSS.