Punti di controllo in questa sezione:
- 3.6 Marcare le liste ed elencare i suoi elementi in modo appropriato. [Priorità 2]
- 13.2 Fornire dei metadata per aggiungere informazioni semantiche alle pagine e ai siti. [Priorità 2]
Gli sviluppatori sono incoraggiati a usare UL
per gli elenchi non numerati, e OL
per gli elenchi numerati (cioè l’uso appropriato del markup) combinato con i CSS per fornire le informazioni contestuali.
Il seguenti CSS2 mostrano come fornire numeri composti per liste annidate create sia con UL
, sia con OL
. Gli elementi sono numerati come “1”, “1.1”, “1.1.1”, ecc.
Esempio:
<style type="text/css">
ul, ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".");
counter-increment: item }
</style>
Fino a quando i CSS2 non saranno largamente sopportati dai browsers o i browser stessi non permetteranno agli utenti di poter controllare le liste con altri mezzi, gli autori dovrebbero provvedere a fornire indicazione contestuali. nelle liste nidificate.
Il seguente esempio di CSS1 mostra come nascondere la fine di un elenco quando i CSS sono letti, e farla vedere quando i CSS non sono supportati.
Esempio:
<style type="text/css">
.finelista { display: none }
</style>
<ul>
<li>Colori:
<ul>
<li>bianco</li>
<li>rosso</li>
<li>verde
<span class="finelista">(Fine dei colori)</span>
</li>
</ul>
</li>
<li>Fiori:
<ul>
<li>Rosa</li>
<li>Tulipano</li>
<li>Margherita
<span class="finelista">(Fine dei fiori)</span>
</li>
</ul>
</li>
<li>Computer:
<ul>
<li>Schermo</li>
<li>Tower</li>
<li>Tastiera.
<span class="finelista">(Fine del computer)</span>
</li>
</ul>
<span class="finelista">(Fine di tutto l’elenco)</span>
</li>
</ul>
Nota: Nel caso di liste molto composte, con qualche sforzo maggiore l’autore potrebbe mettere simile markup alla fine di ogni elemento dell’elenco.