Le liste in HTML

Le liste, che nel linguaggio HTML vengono riportate con i tag ol e ul, ci permettono di inserire degli elenchi nelle nostre pagine web. Vengono usate soprattutto per creare i menù di navigazione ma anche per fare elenchi all’interno degli articoli.

Le liste sono di due tipi:

• Il tag ol sta per le liste ordinate in maniera crescente o decrescente. Si possono usare i numeri naturali, le lettere dell’alfabeto o i numeri romani.
• Il tag ul sta invece per elenchi i cui elementi non hanno un ordine preciso, come quello che state leggendo ora. L’unica cosa che si può modificare è il tipo di simbolo primo della nuova frase.

Come inserire le liste nei file HTML

Per inserire una lista, bisogna scrivere i tag di apertura e di chiusura del tipo di elenco desiderato e aggiungere ogni singolo oggetto all’interno del tag li, che serve a racchiudere un singolo oggetto:

<ol>
   <li>Lunedi</li>
   <li>Martedì</li>
   <li>Mercoledì</li>
   <li>Giovedì</li>
   <li>Venerdì</li>
   <li>Sabato</li>
   <li>Domenica</li>
</ol>

L’elenco verrà visualizzato come in basso:

1. Lunedi
2. Martedì
3. Mercoledì
4. Giovedì
5. Venerdì
6. Sabato
7. Domenica

E’ possibile modificare il modo in cui ordinare attribuendogli un tipo di stile all’interno del tag di apertura nel file HTML oppure su un file CSS a parte, che rimane sempre l’opzione migliore.

<ol style="list-style-type: a"> 

</ol>

Possiamo inserire i valori indicati nella tabella:

Aggiungendo l’attributo reversed, stiamo indicando alla pagina web di inserire i numeri o le lettere in maniera decrescente: se ci sono 5 elementi, invece di iniziare a contare dal numero 1 fino al 5 farà il contrario.

<ol reversed> 

</ol>

Per inserire un elenco puntato o di altro tipo basta usare il tag ul e inserire i vari elementi come per le liste ordinate. Quello che segue è il menù di navigazione di Tour Virtuali.

<ul>
   <li>Africa</li>
   <li>Americhe</li>
   <li>Asia</li>
   <li>Europa</li>
   <li>Oceania</li>
</ul>

E’ possibile modificare il tipo di figura che precede i vari elementi di un elenco. Anche in questo caso si usano le regole di stile.

ul {
 list-style-type:square 
}