Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare
le "liste", che sono sostanzialmente di tre tipi:
- Elenchi ordinati
- Elenchi non ordinati
- Elenchi di definizioni
Tutti e tre i tipi di elenchi funzionano nel medesimo modo: si apre il tag,
si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude
il tag dell’elenco. La sintassi ha quindi questa forma:
<elenco>
<elemento>nome del primo elemento
<elemento>nome del secondo elemento
</elenco>
come si può vedere, il tag che individua l’elemento della lista
non ha bisogno di chiusura (la sua chiusura, in questo caso, è opzionale).
Le liste di definizioni hanno una struttura leggermente diversa che vedremo
a breve.
Gli elenchi ordinati
Gli elenchi ordinati sono contraddistinti dall’enumerazione degli elementi
che compongono la lista. Avremo quindi una serie progressiva ordinata e individuata
da lettere o numeri (se utilizzate un programma di videoscrittura, siete abituati
a chiamarli elenchi numerati).
Il tag da utilizzare per aprire un elenco ordinato è <ol>
("ordered list") e gli elementi sono individuati dal tag <li>
("list item"):
<div>Testo che precede la lista
<ol>
<li>primo elemento
<li>secondo elemento
<li>terzo elemento
</ol>testo che segue la lista
</div>
|
Testo che precede la lista - primo elemento
- secondo elemento
- terzo elemento
testo che segue la lista |
|
Da notare che il tag che individua l’elenco lascia una riga di spazio
prima e dopo il testo che eventualmente lo circonda (come avviene per il <p>);
fa eccezione però l’inclusione di un nuovo elenco all’interno
di un elenco preesistente: in questo caso non viene lasciato spazio, né
prima, né dopo.
Gli elementi dell’elenco sono sempre rientrati di uno spazio verso destra:
tutto questo serve a individuare in modo inequivocabile l’elenco.
Lo stile di enumerazione visualizzata di default dal browser è quello numerica,
ma è possibile indicare uno stile differente specificandolo per mezzo dell’attributo
type. Ad esempio:
<ol type="a">
<li>primo elemento
<li>secondo elemento
<li>terzo elemento
</ol>
Gli stili consentiti sono:
Valore dell'attributo type |
Stile di enumerazione |
type="1"
(è così di default) |
numeri arabi |
<ol type="1">
<li>primo
<li>secondo
<li>terzo
</ol> |
- primo
- secondo
- terzo
|
type="a" |
alfabeto minuscolo |
<ol type="a">
<li>primo
<li>secondo
<li>terzo
</ol> |
- primo
- secondo
- terzo
|
type="A" |
alfabeto maiuscolo |
<ol type="A">
<li>primo
<li>secondo elemento
<li>terzo
</ol> |
- primo
- secondo
- terzo
|
type="i" |
numeri romani minuscoli |
<ol type="i">
<li>primo
<li>secondo elemento
<li>terzo
</ol> |
- primo
- secondo
- terzo
|
type="I" |
numeri romani maiuscoli |
<ol type="I">
<li>primo
<li>secondo elemento
<li>terzo
</ol> |
- primo
- secondo
- terzo
|
|
Gli elenchi non ordinati
Gli elenchi non ordinati sono individuati dal tag <ul>
("unordered list"), e gli elementi dell’elenco sono contraddistinti
anch’essi dal tag <li> (in buona sostanza si tratta di quello che
i programmi di videoscrittura chiamano elenchi puntati):
<ul>
<li>primo elemento
<li>secondo elemento
<li>terzo elemento
</ul>
il tipo di segno grafico utilizzato per individuare gli elementi dell’elenco
di default dipende dal browser, ma di solito è un "pallino pieno".
È possibile comunque scegliere un altro tipo di segno:
Valore dell'attributo type |
Stile di enumerazione |
type="disc"
(è così di default) |
visualizza un "pallino" pieno.
È la visualizzazione di default |
<ul type="disc">
<li>primo
<li>secondo
<li>terzo
</ul> |
|
type="circle" |
visualizza un cerchio vuoto al proprio interno |
<ul type="circle">
<li>primo
<li>secondo
<li>terzo
</ul> |
|
type="square" |
Visualizza un quadrato pieno al proprio interno |
<ul type="square">
<li>primo
<li>secondo elemento
<li>terzo
</ul> |
|
|
Da notare inoltre che il tipo di segno grafico, varia in automatico al variare
dell’annidamento della lista. Ad esempio:
<ul>
<li>primo della 1a lista
<li>secondo della 1a lista
<ul>
<li>primo della 2a lista
<li>secondo della 2a lista
<ul>
<li>primo della 3a lista
</ul>
</ul>
<li>terzo della 1a lista
</ul> |
- primo della 1a lista
- secondo della 1a lista
- primo della 2a lista
- secondo della 2a lista
- terzo della 1a lista
|
|
Elenchi di definizioni
Gli elenchi di definizioni sono individuati dal tag <dl>.
Gli elementi dell’elenco (a differenza delle liste ordinate, e delle liste
non ordinate) questa volta sono formati da due parti:
<dt> |
definition term: indica il termine da definire. A differenza
dell’elemento <li> in questo caso non c’è
rientro. |
<dd> |
definition description: è la definizione vera
e propria del termine. L’elemento è rientrato. |
|
Vediamo un esempio:
<p>Ecco i principali tag per delimitare il testo:
<dl>
<dt><p>
<dd>individua l'apertura di un nuovo paragrafo
<dt><div>
<dd>individua l'apertura di un nuovo blocco di testo
<dt><span>
<dd>individua l'apertura di un elemento inline,
cui attribuire una formattazione atraverso gli stili
</dl>
ci sono poi altri tag che...
</p>
| Ecco i principali tag per delimitare il testo: - <p>
- individua l'apertura di un nuovo paragrafo
- <div>
- individua l'apertura di un nuovo blocco di testo
- <span>
- individua l'apertura di un elemento inline, cui attribuire una formattazione atraverso gli stili
ci sono poi altri tag che... |
|
Approfondimenti
Ovviamente la scelta del tipo di elenco attraverso l’attributo type
è deprecato dal W3C, perché si tratta di una caratteristica che
riguarda la formattazione, e dunque andrebbe effettuata utilizzando i CSS. Con
i fogli di stile c’è anche la possibilità di scegliere un’immagine
(ad esempio una GIF) come segno distintivo per l’elenco puntato. Chi fosse
interessato ad approfondire può consultare la
relativa lezione della guida ai fogli di stile.