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.