Elenco numerato tag OL

Come creare un elenco numerato o simile in html con il tag OL:

<ol>
<li>primo elemento dell'elenco</li>
<li>secondo elemento dell'elenco</li>
<li>terzo elemento dell'elenco</li>
</ol>


il risultato sarà:

1. primo elemento dell'elenco


2. secondo elemento dell'elenco


3. terzo elemento dell'elenco

Possiamo personalizzare il nostro elenco con l'attributo TYPE:

<ol type="a">
<li>primo elemento dell'elenco</li>
<li>secondo elemento dell'elenco</li>
<li>terzo elemento dell'elenco</li>
</ol>

il risultato sarà:

1. primo elemento dell'elenco


2. secondo elemento dell'elenco


3. terzo elemento dell'elenco

TYPE può avere i seguenti valori:

• "a" elenco in lettere minuscole;
• "A" elenco in lettere maiuscole;
• "i" elenco in numeri romani minuscoli;
• "I" elenco in numeri romani maiuscoli;
• "1" elenco numerato di default.

Cmq l'uso di tale attributo, come COMPACT e START, è sconsigliato oltre che non supportato da linguaggi quali XHTLM nell'1.0 Strict DTD.

Aggiungendo START settiamo il valore di partenza dell'elenco:

<ol type="a" start="2">
<li>primo elemento dell'elenco</li>
<li>secondo elemento dell'elenco</li>
<li>terzo elemento dell'elenco</li>
</ol>

il risultato sarà:

2. primo elemento dell'elenco


3. secondo elemento dell'elenco


4. terzo elemento dell'elenco

Elenchi nidificati:

<ol>
<li>primo elemento dell'elenco</li>
<li>secondo elemento dell'elenco</li>
<ol>
<li>primo elemento dell'elenco nidificato</li>
<li>secondo elemento dell'elenco nidificato&</li>
</ol>
<li>terzo elemento dell'elenco</li>
</ol>

il risultato sarà:

1. primo elemento dell'elenco


2. secondo elemento dell'elenco




1. primo elemento dell'elenco nidificato


2. secondo elemento dell'elenco nidificato




3. terzo elemento dell'elenco

Inoltre è possibile applicare l'attibuto TYPE direttamente al tag <li>; valgono gli stessi valori sopra elencati per l'elemento <ol> in più:

• "disc" elenco puntato con puntatore a forma di disco;
• "circle" elenco puntato con puntatore a forma di cerchio vuoto;
• "square" elenco puntato con puntatore a forma di quadrato.

<ol>
<li type="circle">primo elemento dell'elenco</li>
<li type="disc">secondo elemento dell'elenco</li>
<li type="square">terzo elemento dell'elenco</li>
</ol>

il risultato sarà*:

1. primo elemento dell'elenco


2. secondo elemento dell'elenco


3. terzo elemento dell'elenco

*non compatibile con IE7