Creare liste ordinate HTML con il tag ol

Le liste ordinate HTML, dette anche liste numerate, con­sen­to­no di creare elenchi ge­rar­chi­ci in ordine al­fa­nu­me­ri­co. Sono la con­tro­par­te delle liste non ordinate. Ogni lista ordinata inizia con il tag HTML <ol> e finisce con il tag </ol>. Il vantaggio delle liste numerate è che offrono una maggiore chiarezza e rendono ordinato il design di un sito web.

Cos’è una lista ordinata HTML?

Nei documenti HTML, una lista ordinata HTML è un elenco che presenta una serie numerata di elementi. Queste liste vengono create con il tag <ol>; ogni elemento della lista viene con­tras­se­gna­to con il tag <li> (list item). Per im­po­sta­zio­ne pre­de­fi­ni­ta a ogni voce della lista viene assegnato un numero crescente, ma esistono anche altre pos­si­bi­li­tà di nu­me­ra­zio­ne (ad esempio lettere o numeri romani).

Le liste HTML numerate sono una sequenza fissa, rap­pre­sen­ta­ti­va e ge­rar­chi­ca. Le voci dell’elenco non possono e non devono essere disposte a piacere, bensì seguire la logica di una di­chia­ra­zio­ne semantica.

Perché le liste ordinate sono im­por­tan­ti per la SEO?

Strut­tu­ra­re i documenti HTML in modo chiaro è im­por­tan­te per l’ot­ti­miz­za­zio­ne per i motori di ricerca e per l’ac­ces­si­bi­li­tà del tuo sito web. Per la va­lu­ta­zio­ne e il ri­le­va­men­to dei contenuti, un testo ordinato, logico e variegato è im­por­tan­te al pari della qualità dei contenuti stessi, delle parole chiave e dell’uso corretto dei meta tag HTML. Insieme ai titoli, ai sot­to­ti­to­li e alle parti in grassetto, le liste ordinate HTML sono uno degli elementi di pro­get­ta­zio­ne più im­por­tan­ti che hai a di­spo­si­zio­ne in HTML.

Quando si usano le liste numerate in HTML?

Tra gli usi più frequenti delle liste ordinate troviamo:

• Istru­zio­ni/tutorial
• Clas­si­fi­che
• Sequenze di processi o fasi di lavoro
• Elenchi ge­rar­chi­ci (ad esempio gli in­gre­dien­ti nelle ricette)

Come si crea una lista ordinata HTML?

Per conferire ai testi una struttura chiara con gli elementi della lista ordinati hai bisogno dei tag HTML seguenti:

• <ol>: indica il punto di inizio di una lista ordinata
• </ol>: indica la fine di una lista numerata
• <li>: apre un elemento della lista
• </li>: chiude un elemento della lista

La sintassi di una lista ordinata 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>

In assenza di in­di­ca­zio­ni diverse nel documento HTML, per im­po­sta­zio­ne pre­de­fi­ni­ta i browser ag­giun­go­no all’elenco numeri arabi in ordine crescente.

Come si può cambiare la nu­me­ra­zio­ne del tag <ol> HTML?

Speciali attributi HTML ti con­sen­to­no di definire un elenco con numeri e lettere, con un valore iniziale o nell’ordine inverso.

Definire il tipo di elenco con type

Per definire il tipo di elenco aggiungi al tag <ol>HTML l’attributo type come segue:

<ol type="X">
<li>Primo punto della lista</li>
<li>Secondo punto della lista</li>
<li>…</li>
</ol>

In base alle tue esigenze puoi so­sti­tui­re il valore del se­gna­po­sto X con cifre, lettere o numeri romani:

• type=1: definisce l’elenco con numeri arabi partendo da 1 (im­po­sta­zio­ne pre­de­fi­ni­ta in assenza di in­di­ca­zio­ni contrarie)
• type=A: definisce l’elenco in lettere maiuscole iniziando da A
• type=a: definisce l’elenco in lettere minuscole iniziando da a
• type=i / type=I: definisce l’elenco in numeri romani minuscoli (i, ii, iii, iv…) o maiuscoli (I, II, III, IV…).

Definire il valore iniziale con l’attributo start

Se non desideri che la lista inizi con “1” o con “A”, puoi definire un valore iniziale per­so­na­liz­za­to come segue:

<ol start="X">
<li>Primo punto della lista</li>
<li>Secondo punto della lista</li>
<li>…</li>
</ol>

Dovrai so­sti­tui­re la X con il valore con cui deve iniziare l’elenco. Di seguito il codice per far iniziare la nu­me­ra­zio­ne in ordine crescente da 5:

<ol start="5">
<li>Primo punto della lista</li>
<li>Secondo punto della lista</li>
<li>…</li>
</ol>

Invertire l’elenco con reversed

Per invertire la direzione di conteggio della lista, ovvero da crescente a de­cre­scen­te, usa l’istru­zio­ne reversed. La sintassi si presenta come segue:

<ol start="1" reversed>
<li>Primo punto della lista</li>
<li>Secondo punto della lista</li>
<li>…</li>
</ol>

Ora il conteggio inizia dal valore più grande e termina con 1.