Vediamo adesso il cosa sono e come funzionano gli elenchi HTML, i quali possono essere numerati o puntati o, più correttamente, ordinati o non ordinati: i primi sono elenchi caratterizzati da una scaletta numerica o alfabetica, mentre i secondi sono elenchi di voci senza un ordine preciso.
Da un punto di vista funzionale, per fare un esempio, è corretto utilizzare un elenco puntato per una lista della spesa, mentre è preferibile un elenco numerato per descrivere i diversi passaggi di un procedimento matematico o di una ricetta in cui debba essere rispettata una precisa sequenza.
Esempio di elenco ordinato (o numerato):
- Prendi la mela
- Sbucciala
- Mangiala
Esempio di elenco non ordinato (o puntato):
- Pippo
- Pluto
- Topolino
I tag <ol>, <ul> e <li>
In HTML, gli elenchi ordinati (cd. elenchi numerati) si generano attraverso il tag ol (ordered list) mentre quelli non ordinati (cd. elenchi puntati) mediante ul (unordered list). Entrambi utilizzano il tag li (list item) per specificare le singole voci (item) dell’elenco.
Vediamo adesso un esempio di codice HTML per creare un elenco ordinato:
<ol>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
</ol>Vediamo ora un esempio di elenco non ordinato:
<ul>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
</ul>Gli attributi type e start
Entrambi i tipi di elenco supportano l’attributo type, che permette di specificare il tipo di elenco, mentre gli elenchi ordinati supportano anche l’attributo start, che permette di far partire l’elenco dal numero o lettera che si desidera.
L’attributo type supporta i seguenti valori:
- Elenchi ordinati
- A – visualizza l’elenco alfabetico con lettere maiuscole
- a – visualizza l’elenco alfabetico con lettere minuscole
- I – visualizza l’elenco con i numeri romani maiuscoli
- i – visualizza l’elenco con i numeri romani minuscoli
- 1 – visualizza l’elenco con i numeri arabi
- Elenchi non ordinati
- disc – visualizza un cerchio pieno (di default)
- square – visualizza un quadrato pieno
- circle – visualizza un cerchio vuoto
Vediamo un esempio che comprenda sia type che start all’interno di un elenco ordinato:
<ol type="A" start="5">
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
</ol>Questo il risultato:
- Bla, bla, bla…
- Bla, bla, bla…
- Bla, bla, bla…
E’ bene precisare che è possibile annidiare elenchi all’interno di altri elenchi. Vediamo un esempio:
<ul>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...
<ul>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
</ul>
</li>
<li>Bla, bla, bla...</li>
<li>Bla, bla, bla...</li>
</ul>Questo il risultato:
- Bla, bla, bla…
- Bla, bla, bla…
- Bla, bla, bla…
- Bla, bla, bla…
- Bla, bla, bla…
- Bla, bla, bla…
- Bla, bla, bla…
- Bla, bla, bla…
- Bla, bla, bla…
- Bla, bla, bla…
Liste di definizione
Un tipo particolare di elenco HTML è dato dalle liste di definizione. Gli elenchi di questo tipo sono aperti dal tag HTML <dl> (definition list), mentre gli elementi sono composti ciascuno da due tag: <dt> (definition term) e <dd> (definition description).
Ciascun elemento della lista di definzione, quindi, è definito da due tag: col primo si identifica il termine che si vuole definire (dt), col secondo si da la definzione (dd):
<dl>
<dt>HTML</dt>
<dd>Linguaggio di markup ipertestuale</dd>
<dt>PHP</dt>
<dd>Linguaggio lato server per la creazione di siti web dinamici</dd>
</dl>Da un punto di vista visivo il tag <dt> non produce alcun ritorno a capo il quale, invece, è prodotto dal tag <dd>.
