Tag HTML <ol>
Il tag HTML <ol> crea un elenco ordinato. Scopri gli attributi (type, start, reversed) e la proprietà CSS list-style-type con esempi.
Il tag HTML <ol> viene utilizzato per creare un elenco ordinato, che contiene elementi in una determinata sequenza.
Ogni elemento dell'elenco ordinato inizia con il tag di apertura <li> e termina con il tag di chiusura </li>. Oltre al testo, il tag <li> può includere altri elementi HTML (elenchi, immagini, intestazioni, paragrafi, ecc.).
In generale, gli elementi di un elenco ordinato sono preceduti da un marcatore, come una lettera o un numero.
L'attributo type seleziona il tipo di marcatore da utilizzare. I valori possibili sono:
type="1"— numeri arabi (1, 2, 3, ...). Questo è il valore predefinito.type="A"— lettere latine maiuscole (A, B, C, ...).type="a"— lettere latine minuscole (a, b, c, ...).type="I"— numeri romani maiuscoli (I, II, III, ...).type="i"— numeri romani minuscoli (i, ii, iii, ...).
Se non si specifica l'attributo type, il contenuto del tag <ol> viene numerato con numeri arabi, a partire da uno.
L'attributo type è presentazionale — controlla l'aspetto dell'elenco, non il suo significato. L'approccio moderno e consigliato è definire il marcatore in CSS con la proprietà list-style-type, mantenendo lo stile separato dal markup. I valori CSS equivalenti sono: type="1" → decimal, type="A" → upper-alpha, type="a" → lower-alpha, type="I" → upper-roman, type="i" → lower-roman.
Sia il tag <ol> che il tag <ul> rappresentano un elenco di elementi. Tuttavia, la differenza con il tag <ol> è che in questo caso l'ordine è significativo.
In genere, i tag <ol> e <ul> possono essere annidati quanto necessario, alternandoli a piacimento.
Se le proprietà CSS vengono applicate al tag <ol>, gli elementi annidati nel tag <li> le ereditano.
Sintassi
Il tag <ol> va in coppia. Il contenuto viene scritto tra il tag di apertura (<ol>) e quello di chiusura (</ol>).
Esempio del tag HTML <ol>:
Esempio di elenco ordinato con il tag HTML <ol>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Appetizers</li>
<li>Hot</li>
<li>Salads</li>
</ol>
<ol start="50">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol type="A">
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>Nell'esempio precedente è stato utilizzato l'attributo start con il valore "50".
Invece di impostare il marcatore nel markup con l'attributo type, è preferibile definirlo in CSS con la proprietà list-style-type. In questo modo la presentazione rimane nel foglio di stile e la regola può essere riutilizzata su molti elenchi. Nell'esempio seguente il marcatore è definito in un blocco <style> anziché in un attributo style= inline:
Esempio del tag HTML <ol> utilizzato con la proprietà CSS list-style-type:
Esempio del tag HTML <ol> con la proprietà list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.roman {
list-style-type: upper-roman;
}
.letters {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Examples of ordered lists</h2>
<ol class="roman">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol class="letters">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
<ol>
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
</body>
</html>L'attributo reversed
Aggiungendo l'attributo boolean reversed, l'elenco viene numerato in ordine decrescente. È utile per conto alla rovescia tipo "top 5" o per qualsiasi elenco in cui l'ultimo elemento deve avere il numero più basso. Può essere combinato con start per controllare il numero più alto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Top three drinks</h2>
<ol reversed>
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>I marcatori nell'esempio precedente contano alla rovescia 3, 2, 1.
Annidamento di elenchi ordinati
Un elemento di elenco può contenere un altro <ol>, permettendo di creare strutture gerarchiche e sotto-passi. Ogni elenco annidato riavvia la propria numerazione. Posizionare il <ol> annidato all'interno del <li> padre (non tra gli elementi dell'elenco) affinché la struttura rimanga valida.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Drinks
<ol type="a">
<li>Cold drinks</li>
<li>Hot drinks</li>
</ol>
</li>
<li>Desserts
<ol type="a">
<li>Ice-Cream</li>
<li>Cake</li>
</ol>
</li>
</ol>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| compact | compact | Suggeriva che l'elenco dovesse essere reso in modo più compatto, con meno spazio tra gli elementi. Deprecato e non supportato in HTML5. Per ridurre la spaziatura, utilizzare invece le proprietà CSS margin e padding sugli elementi <li> (o <ol>). |
| reversed | reversed | Indica che gli elementi dell'elenco devono essere in ordine decrescente (anziché nel solito ordine crescente). |
| start | number | Imposta il numero da cui inizia l'elenco ordinato. Il valore deve essere un intero; sono ammessi valori negativi. Se usato con le lettere (type="A" e type="a"), il numero indica la posizione ordinale della lettera nell'alfabeto. Ad esempio, start="5" corrisponde alla lettera "E", quindi l'elenco inizia da essa. Se viene specificato start="27", l'elenco diventa a due cifre (27 = "AA", 28 = "AB", 29 = "AC", ...). |
| type | 1, A, a, I, i | Definisce il tipo di marcatore dell'elenco (numeri decimali, lettere maiuscole, lettere minuscole, numeri romani maiuscoli, numeri romani minuscoli). |
Il tag <ol> supporta gli Attributi Globali e gli Attributi Evento.
Tag e proprietà correlati
<ul>— un elenco non ordinato (puntato), quando l'ordine non è significativo.<li>— l'elemento di elenco usato all'interno di<ol>e<ul>.list-style-type— la proprietà CSS per scegliere lo stile del marcatore.
Come applicare stili al tag HTML <ol>
{
"tag_name": "ol"
}