Liste non ordinate
Autrice
Claudia Cantaluppi.
Introduzione
L’xhtml strict richiede che tutti gli elementi del codice siano annidati nel modo giusto. Quindi un elemento genitore si deve chiudere DOPO che si è chiuso un elemento figlio; non si può chiudere un contenitore senza averne prima chiuso contenuto.
Un esempio di sintassi errata è <div><p>bla bla bla</div></p> laddove dovremmo invece avere <div><p>bla bla bla</p></div> . Il <div> contiene <p> e si deve chiudere dopo.
Si sa che i browser sono di bocca buona e potrebbero anche visualizzare il contenuto nel modo giusto, rendendo difficile la percezione dell’errore, ma un parser non potrà certo lasciar passare una cosa simile!
Questo stesso principio si applica alle liste annidate, cioè quelle liste (ordinate o non) composte da voci principali e voci secondarie; queste ultime si riconoscono per il maggior rientro a sinistra e per l’uso, talvolta, di un simbolo diverso.
Lista semplice
I due elementi necessari a comporre una lista sono <ul> oppure <ol> – l’elemento contenitore che apre la lista – e <li> – l’elemento che identifica ogni voce. Per una lista normale l’annidamento è molto semplice: prima di poter chiudere il contenitore <ul> devo avere chiuso tutte le voci da esso contenute.
<ul>
<li>prima voce</li>
<li>seconda voce</li>
</ul>
Lista annidata errata
Ma come procedere per le liste annidate? Gli elementi che servono sono gli stessi; ogni volta che voglio inserire della voci secondarie basta che apra un nuovo contenitore <ul>. Ma dove metterlo? Esaminiamo il seguente esempio:
<ul>
<li>prima voce principale</li>
<ul><li>voce secondaria</li>
<li>altra voce secondaria</li>
</ul>
<li>seconda voce principale</li>
<ul><li>voce secondaria</li>
<li>altra voce secondaria</li> </ul>
</ul>
A prima vista non sembrano esserci errori, e probabilmente anche il browser visualizzerà la lista nella maniera corretta, dando perciò più rientro a sinistra e usando un pallino diverso per “voce secondaria” e “altra voce secondaria”. Ma c’è un problema! Il primo </ul> noi lo sappiamo che chiude il secondo <ul>, cioè il contenitore della lista secondaria, ma chi ce lo può assicurare? Inoltre il <li> di “seconda voce principale” è preceduto da questo famigerato </ul>, mentre si suppone che un elemento <li> sia preceduto o da un <ul> (d’apertura) o dalla chiusura di un’altra voce, quindi da </li>. Tutto ciò manda il parser in confusione…
Lista annidata corretta
La sintassi corretta richiede un po’ più di attenzione ma a ben guardare è più logica. In fondo ogni voce principale è sì contenuto del primo contenitore <ul> ma è anche a sua volta contenitore del contenitore <ul> che serve per le voci secondarie… quindi non può chiudersi prima! In pratica la sintassi giusta è la seguente:
<ul>
<li>prima voce principale
<ul><li>voce secondaria</li>
<li>altra voce secondaria</li>
</ul></li>
<li>seconda voce principale
<ul><li>voce secondaria</li>
<li>altra voce secondaria</li>
</ul></li>
</ul>
