Tag HTML <ol>

Definizione e uso

<ol> L'etichetta definisce un elenco ordinato. Gli elenchi ordinati possono essere in ordine numerico o alfabetico.

<li> L'etichetta definisce ogni voce dell'elenco.

Suggerimento:Utilizza CSS per impostare lo stile dell'elenco.

Suggerimento:Per elenchi non ordinati, utilizzare: <ul> etichetta.

Vedi anche:

Guida HTML:Elenco HTML

Manuale di riferimento HTML DOM:Oggetto Ol

Guida CSS:Imposta lo stile dell'elenco

Esempio

Esempio 1

Due elenchi ordinati diversi (il primo elenco inizia da 1, il secondo da 50):

<ol>
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ol>
<ol start="50">
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ol>

Prova da solo

Esempio 2

Imposta diversi tipi di elenchi (utilizzando CSS):

<ol style="list-style-type:upper-roman">
<li>Caffè</li>
<li>Tè</li>
<li>Latte</li>
</ol>
<ol style="list-style-type:lower-alpha">
<li>Caffè</li>
<li>Tè</li>
<li>Latte</li>
</ol>

Prova da solo

Esempio 3

Visualizza tutti i diversi tipi di elenchi disponibili tramite CSS:

<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>

Prova da solo

Esempio 4

Riduci e ingrandisci l'altezza delle righe della lista (utilizzando CSS):

<ol style="line-height:80%">
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ol>
<ol style="line-height:180%">
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ol>

Prova da solo

Esempio 5

Incorpora una lista non ordinata in una lista ordinata:

<ol>
  <li>Caffè</li>
  <li>Tè</li>
    <ul>
      <li>Lung Ching</li>
      <li>Pu'er</li>
    </ul>
  </li>
  <li>Latte</li>
</ol>

Prova da solo

Proprietà

Proprietà Valore Descrizione
reversed reversed Definisce che l'ordine della lista deve essere invertito (9,8,7 ...).
start Numero Definisce il valore di partenza dell'elenco ordinato.
type
  • 1
  • A
  • a
  • I
  • i
 Definisce il tipo di tag da utilizzare nell'elenco.

Proprietà globali

<ol> Il tag supporta anche Proprietà globali nell'HTML.

Proprietà degli eventi

<ol> Il tag supporta anche Proprietà degli eventi nell'HTML.

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <ol> Elemento:

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Prova da solo

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto