Html5 offre la possibilità di creare delle liste, ovvero elenchi di dati utilizzati principalmente per:
- organizzare la struttura della pagina html (ad esempio per la creazione di un menu).
- organizzare il testo (ad esempio per la creazione di un indice)
Queste liste inoltre possono essere di tre tipologie differenti :
- liste ordinate di valori
- liste non ordinate di valori
- liste di definizione
Liste Ordinate
il tag <ol> , è l’elemento che identifica un elenco ordinato di valori ed è caratterizzato da una scaletta numerica che identifica i dati della lista.
Sintassi di base
Copiando quanto di seguito nei vostri editor di testo , andiamo a creare una lista ordinata di valori.
<!doctype
html>
<html lang=”it”>
<body>
<ol>
<li>home</li>
<li>tecnologia</li>
<li>programmazione</li>
</ol>
</body>
</html>
Le liste ordinate , vengono precedute da un valore numerico che di default è la classica numerazione araba.
Attraverso l’ attributo type è possibile modificare il valore di default nei seguenti:
- <ol type = “A”> lettere alfabetiche maiuscole
- <ol type = “a”> lettere alfabetiche minuscole
- <ol type = “I”> numeri romani maiuscoli
- <ol type = “i”> numeri romani minuscoli
- <ol type = “1”> numeri arabi (valore di default)
<!doctype html>
<html lang=”it”>
<body>
<ol type="A">
<li>home</li>
<li>tecnologia</li>
<li>programmazione</li>
</ol>
</body>
</html>
Liste non ordinate
il tag <ul> , è l’elemento che identifica un elenco non ordinato di valori ed è caratterizzato da puntini che identificano i dati della lista.
Sintassi di base
<!doctype
html>
<html lang=”it”>
<body>
<ul>
<li>patate</li>
<li>olive</li>
<li>prezzemolo</li>
</ul>
</body>
</html>
Come per le liste ordinate è possibile cambiare i puntini con i seguenti elementi :
- <ul type = square> quadratini
- <ul type = circle> cerchietti vuoti
- <ul type = disc> tondi pieni (valore di default)
<!doctype
html>
<html lang=”it”>
<body>
<ul type =square>
<li>patate</li>
<li>olive</li>
<li>prezzemolo</li>
</ul>
</body>
</html>
Liste di definizione
Una lista di definizione , è una lista di termini con una descrizione per ciascuno di essi.
Si definisce una lista di definizione , attraverso i tag <dl> e <dd>.
<!doctype html>
<html lang=”it”>
<body>
<dl>
<dt>patate</dt>
<dd>le patate sono tuberi </dd>
<dt>olive</dt>
<dd>le olive sono un frutto</dd>
</dl>
</body>
</html>
Liste annidate
E’ possibile inserire una lista all’ interno di un altra lista.
La sintassi è molto semplice come si evince dall’ esempio sottostante.
<!doctype
html>
<html lang=”it”>
<body>
<ul>
<li>patate</li>
<li>olive
<ul>
<li>olive nere</li>
<li>olive piccanti</li>
</ul>
</li>
<li>cipolla</li>
</ul>
</body>
</html>
