Il tag <OL> in Html
In questa lezione del corso HTML ti spiego come fare gli elenchi numerati tramite il tag <ol>
<ol> </ol>
Questo tag ti permette di creare un elenco ordinato sulla pagina web, ossia una lista di elementi organizzati in una sequenza numerata.
Il nome del tag <ol> è l'abbreviazione di "ordered list", ovvero lista ordinata.
Cos'è una lista ordinata? E' una lista in cui ogni elemento è numerato in modo progressivo e preceduto da un numero (1, 2, 3, ecc.) o da un letterale in ordine alfabetico (a, b, c, ecc.). Ad esempio,
Sono utili per elencare delle operazioni da compiere in sequenza o qualsiasi lista dove dove l'ordine stesso degli elementi è un'informazione importante. Se invece vuoi realizzare un elenco non numerato, ti consiglio di usare il tag <ul>
Ti faccio un esempio pratico.
Puoi usare il tag <ol> nella sezione <body> del documento Html.
- <!DOCTYPE html>
- <html>
- <head>
- ...
- </head>
- <body>
- <ol>
- <li>Primo elemento</li>
- <li>Secondo elemento</li>
- <li>Terzo elemento</li>
- </ol>
- ...
- </body>
- </html>
I tag <ol> crea una lista ordinata.
All'interno del tag <ol> puoi inserire uno o più elementi <li> che rappresentano gli elementi dell'elenco.
Il risultato sul browser dell'utente è un elenco numerato
A cosa serve?
Il tag <ol> ti consente di organizzare i contenuti di una pagina web in modo più intuitivo, perché un elenco numerato è molto più facile da leggere per gli utenti.
Nota. Il tag <ol> migliora anche l'accessibilità della pagina, perché è interpretato come elenco numerato anche dai browser speciali utilizzati dagli utenti con disabilità visive, rendendo più semplice la navigazione tra le informazioni.
Quali sono gli attributi del tag <ol>?
Il tag <ol> ha diversi attributi che ti permettono di personalizzare l'aspetto delle liste numerate.
In particolar modo ha tre attributi molto utili
- start: indica il valore di partenza della numerazione dell'elenco.
- reversed: inverte l'ordine della numerazione dell'elenco.
- type: specifica il tipo di numerazione dell'elenco (ad esempio, numerica o letterale).
Nota. Questi vecchi tag del tag <ol> sono ancora funzionanti ma obsoleti, perché puoi ottenere gli stessi risultati anche usando un foglio di stile CSS. Tuttavia, la conoscenza di questi vecchi attributi del tag <ol> è ancora molto utile.
L'attributo start
L'attributo start ti permette di far iniziare la lista da un numero diverso da 1.
Ad esempio, per far partire la lista dal numero 4 digita
<ol start=4>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
In questo modo la lista comincia con il numero 4
L'attributo reversed
L'attributo reversed ti permette di numerare gli elementi in modo inverso partendo dall'ultimo.
Ad esempio, digita questo codice
<ol reversed>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
L'ordine di visualizzazione degli elementi dell'elenco è inverso.
Il primo elemento dell'elenco viene visualizzato come "3.", il secondo come "2." e il terzo come "1.".
Nota. L'utilizzo dell'attributo reversed non cambia l'ordine degli elementi ma soltanto la numerazione. Se vuoi cambiare l'ordine degli elementi dell'elenco, devi modificare la struttura dell'elenco nel codice HTML, modificando l'ordine dei tag <li>.
L'attributo type
L'attributo type ti permette di cambiare il tipo di numerazione della lista usando uno di questi valori
- 1 = numeri arabi
- a = lettere minuscole
- A = lettere maiuscole
- i = numeri romani minuscoli
- I = numeri romani maiuscoli
Ad esempio, per usare i numeri romani al posto dei numeri arabi digita
<ol type=I>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
Ora ogni elemento della lista è associato a un numero romano maiuscolo.
L'attributo start è molto utile quando devi creare delle liste annidate, ossia una lista dentro un'altra lista, perché ti permette di cambiare la numerazione.
Ad esempio, digita questo codice
<ol>
<li>Primo elemento <ol type=a><li>voce 1</li><li>voce 2</li></ol></li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
All'interno del primo elemento c'è una lista annidata.
Per rendere più facile la lettura, la lista più interna utilizza la numerazione romana, mentre quella più esterna la numerazione araba.
Nota. Gli attributi type e start sono ancora funzionanti ma ormai obsoleti da tempo. Puoi ottenere gli stessi risultati usando un foglio di stile CSS. I fogli di stile sono molto più potenti.
In alternativa, puoi impostare i numeri romani anche tramite il foglio di stile CSS.
Ad esempio, modifica la pagina web in questo modo
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- ol { list-style-type: upper-roman; }
- </style>
- ...
- </head>
- <body>
- <ol>
- <li>primo elemento</li>
- <li>secondo elemento</li>
- <li>terzo elemento</li>
- </ol>
- ...
- </body>
- </html>
La proprietà "list-style-type" del foglio di stile CSS ti permette di scegliere il tipo di numerazione.
- none = nessuno
- decimal = numeri arabi
- lower-alpha = lettere minuscole
- upper-alpha = lettere maiuscole
- lower-roman = numeri romani minuscoli
- upper-roman = numeri romani maiuscoli
In questo caso il browser visualizza i numeri romani nell'elenco numerato
In conclusione, in questa lezione ti ho spiegato come fare gli elenchi numerati in HTML, quali sono gli attributi più utili e come modificarli con il CSS
