Gli elenchi numerati (<ol> = Ordered List) hanno la seguente struttura:
<ol>
<li>riga d'elenco</li>
<li>riga d'elenco</li>
</ol>
Ecco un esempio di codice:
<body bgcolor="#ffffff">
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Ut orci erat, viverra ac, pretium ut, placerat sed,
nibh. Vestibulum gravida elementum neque;</li>
<li>sed varius rhoncus nisl. Aliquam ornare suscipit nunc.</li>
</ol>
</body>
L’elemento <ol> può assumere i seguenti attributi:
- start permette di definire il numero iniziale della sequenza. Può assumere come valore un numero intero, una lettera o un numero romano a seconda del type selezionato. E’ molto comodo da utilizzare soprattutto in casi di impaginazioni complesse, quando è necessario spezzare gli elenchi per favorire la visualizzazione;
- type permette di definire il tipo di elenco e può assumere i se seguenti valori:
- A elenco con lettere latine maiuscole (A,B,C…);
- a elenco con lettere latine minuscole (a,b,c…);
- I elenco con lettere romane maiuscole (I,II,III,IV …);
- i elenco con lettere romane minuscole(i,ii,iii,iv …);
- 1 (default) elenco numerato (1,2,3 …).
L’attributo type, con gli stessi valori appena illustrati, può essere inserito anche nel tag <li> e fa si che solo per quella linea di elenco la numerazione sia modificata: la tipologia viene influenza dal valore dell’attributo, mentre il numero o la lettera rimangono quelli corretti nel flusso dell’elenco. Quindi, se si inserisce <li type=”i”> nella seconda riga di un elenco numerato standard, solo quella riga assumerà come numerazione “ii” . Con questo codice è possibile vedere l’effetto dei vari attributi sugli elenchi numerati:
<body bgcolor="#ffffff">
<h1>Elenco standard</h1>
<ol>
<li>Lorem ipsum;</li>
<li>Integer at velit;</li>
<li>nulla molestie rutrum urna.</li>
</ol>
<h1>Elenco con numerazione forzata</h1>
<ol start="5">
<li>Lorem ipsum;</li>
<Integer at valit;</li>
<li>nulla molestie rutrum urna.</li>
</ol>
<h1>Elenco con lettere maiuscole</h1>
<ol type="A">
<li>Lorem ipsum;</li>
<li>Integer at velit;</li>
<li>nulla molestie rutrum urna.</li>
</ol>
<h1>Elenco con lettere minuscole</h1>
<ol type="a">
<li>Lorem ipsum;</li>
<li>Integer at velit;</li>
<li>nulla molestie rutrum urna.</li>
</ol>
<h1>Elenco con numeri romani maiscololi</h1>
<ol type="I">
<li>Lorem ipsum;</li>
<li>Integer at velit;</li>
<li>nulla molestie rutrum urna.</li>
</ol>
<h1>Elenco con numeri romani minuscoli</h1>
<ol type="i">
<li>Lorem ipsum;</li>
<li>Integer at velit;</li>
<li>nulla molestie rutrum urna.</li>
</ol>
</body>
Gli elenchi puntati (ul = Unordered List) vengono definiti in HTML con la seguente struttura:
<ul>
<li>Riga d'elenco</li>
<li>Riga d'elenco</li>
</ul>
Ecco un esempio di codice:
<body bgcolor="#ffffff">
<h1>Elenco puntato</h1>
<ul>
<li>Lorem dolor sit amet, consectetuer adipiscing
elit. Ut orci erat, viverra ac, pretium ut, placerat sed,
nibh. Vestibulum gravida elementum neque;</li>
<li>pretium ut, placerat sed, nibh. Vestibulum gravida
elementum neque;</li>
<li>sed varius rhoncus nisl. Aliquam ornare suscipit nunc.</li>
</ul>
</body>
Il tag <ul>può assumere il solo attributo type , che offre la possibilità di modificare il tipo di punto elenco visualizzato. L’attributo type , in questo caso, può assumere i seguenti valori:
- circle pallino pieno (default);
- disc cerchio vuoto;
- square quadratino;
E’ interessante notare che Internet Explorer visualizza il quadratino pieno in ambiente Windows e vuoto in ambiente Macintosh. Anche per gli elenchi puntati, l’attributo type può essere inserito nel tag <li> , modificando il tipo di punto elenco per quell’unica riga. Con questo codice è possibile vedere l’effetto dell’attributo type sugli elenchi puntati:
<body bgcolor="#ffffff">
<h1>Elenco puntato (circle)</h1>
<ul type="circle">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing,
elite. Ut orcierat, viverra ac, pretium ut, placerat sed,
nibh. Vestibulum gravida elementum naque;</li>
<li>pretium ut, placerat sed,nibh. Vestibulum gravida
elementum neque;</li>
<li>sed varius rhoncus nisl. Aliquam ornare suscipit nunc.</li>
</ul>
<h1>Elenco puntato (square)</h1>
<ul type="square">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Ut orci erat, viverra ac, pretium utl,placerat sed,
nibh. Vestibulum gravida elementum neque;</li>
<li>pretium ut, placerat sed, nibh. Vestibulum gravida
elementum neque;</li>
<li>sed varius rhoncus nisl. Aliquam ornare suscipit nunc.</li>
</ul>
</body>
