Elenchi puntati e numerati

In HTML ci sono molti tipi di elenchi puntati e numerati in diverse maniere, i Tag per ottenere questo sono: "<ol>...<li>...</ol>", dove "<ol>" si mette all'inizio dell'elenco, "<li>" si mette davanti ad ogni nuova voce e "</ol>" si mette alla fine dell'elenco puntato, nel caso di elenchi numerati. Nel caso di elenchi puntati senza alcun tipo di ordinazione al posto di "ol" si mette "ul".

Elenchi numerati

Gli elenchi numerati sono quelli in cui all'inizio è presente una numerazione o un'ordinazione con lettere o numeri romani; vediamo alcuni esempi:

con il codice:

<ol>
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>

si ottiene un elenco numerato con numeri:

1. Voce numero 1.
2. Voce numero 2.
3. Voce numero 3.

con il codice:

<ol type="A">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>

si ottiene un elenco ordinato con lettere maiuscole:

1. Voce numero 1.
2. Voce numero 2.
3. Voce numero 3.

con il codice:

<ol type="a">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>

si ottiene un elenco ordinato con lettere minuscole:

1. Voce numero 1.
2. Voce numero 2.
3. Voce numero 3.

con il codice:

<ol type="I">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>

si ottiene un elenco ordinato con numeri romani maiuscoli:

1. Voce numero 1.
2. Voce numero 2.
3. Voce numero 3.

con il codice:

<ol type="i">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ol>

si ottiene un elenco ordinato con numeri romani minuscoli:

1. Voce numero 1.
2. Voce numero 2.
3. Voce numero 3.

Elenchi puntati non numerati

Questo tipo di elenchi sono, come dice il titoletto, solamente puntati e non hanno un ordinazione di alcun tipo, possiamo però scegliere il tipo di punto che verrà messo ad ogni voce, ma vediamo alcuni esempi:

Con il codice:

<ul type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>

si otterrà:

• Voce numero 1.
• Voce numero 2.
• Voce numero 3.

Con il codice:

<ul type="circle">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>

si otterrà:

• Voce numero 1.
• Voce numero 2.
• Voce numero 3.

Con il codice:

<ul type="square">
<li>Voce numero 1.
<li>Voce numero 2.
<li>Voce numero 3.
</ul>

si otterrà:

• Voce numero 1.
• Voce numero 2.
• Voce numero 3.

Elenchi puntati e numerati nidificati.

E' ovviamente possibile creare elenchi puntati che contengono elenchi numerati che a loro volta ne contengono altri e cosi' via, per esempio il codice:

<ol type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<ul type="disc">
<li>Voce numero 1.
<li>Voce numero 2.
<ol type="A">
<li>Voce numero 1.
<ol type="I">
<li>Voce numero 1.
<li>Voce numero 2.
</ol>
<li>Voce numero 2.
<li>Voce numero 3.
</ol>
<li>Voce numero 3.
</ul>
<li>Voce numero 3.
</ol>

genera il seguente risultato:

1. Voce numero 1.
2. Voce numero 2.
   • Voce numero 1.
   • Voce numero 2.
     1. Voce numero 1.
        1. Voce numero 1.
        2. Voce numero 2.
     2. Voce numero 2.
     3. Voce numero 3.
   • Voce numero 3.
3. Voce numero 3.