Elenchi

Una lista della spesa e una ricetta sono entrambe elenchi, ma solo una delle due si rovina se cambi l'ordine. L'HTML ha un elemento diverso per ciascuna.

Elenchi non ordinati e ordinati

Se l'ordine delle voci non conta, usa un elenco non ordinato, <ul>. I browser segnano ogni voce con un punto elenco. Se l'ordine conta, come nei passaggi di una ricetta o in una classifica, usa un elenco ordinato, <ol>, e il browser numera le voci al posto tuo. In entrambi i casi ogni voce è un <li>, una voce di elenco, e gli unici elementi ammessi direttamente dentro <ul> o <ol> sono elementi <li>. Testo e altri elementi vanno dentro le voci.

<h2>You will need</h2>
<ul>
  <li>500 g flour</li>
  <li>10 g salt</li>
  <li>350 ml warm water</li>
</ul>

<h2>Method</h2>
<ol>
  <li>Mix everything in a bowl.</li>
  <li>Leave it covered for 12 hours.</li>
  <li>Shape and bake at 230 degrees for 40 minutes.</li>
</ol>

Perché non scrivere da soli i numeri o i trattini? Perché in quel caso il browser non sa che c'è un elenco. Uno screen reader annuncia un vero elenco con la sua lunghezza, per esempio elenco, 3 voci, così chi ascolta sa quanto ne arriva e può saltarlo. Quando inserisci un passaggio in un <ol>, tutti i numeri successivi si aggiornano da soli; con i numeri scritti a mano dovresti rinumerare tutto.

Opzioni per gli elenchi ordinati

<ol> ha alcuni attributi. start="4" fa partire il conteggio da 4, utile quando un elenco continua dopo un paragrafo. reversed conta all'indietro, per una top ten. type cambia il segno in lettere o numeri romani: type="a", type="A", type="i" o type="I". Una singola voce può anche saltare a un numero con value, come in <li value="10">. L'aspetto di punti e numeri (forma, colore, o se si vedono del tutto) è controllato dal CSS.

Elenchi dentro elenchi

Una voce di elenco può contenere un intero elenco. Metti il <ul> o l'<ol> interno dentro il <li> a cui appartiene, dopo il testo della voce e prima del suo tag di chiusura. Un errore comune è mettere l'elenco interno fra due elementi <li>, direttamente dentro l'elenco esterno, il che non è ammesso. Gli elenchi annidati sono il modo in cui i siti costruiscono menu con sottomenu e le scalette mostrano i sottopunti.

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

Elenchi di descrizioni

Il terzo tipo di elenco abbina termini e descrizioni, come un glossario o una serie di domande e risposte. <dl> è l'elenco di descrizioni, <dt> contiene un termine e <dd> la sua descrizione. Un termine può avere più descrizioni, e più termini possono condividerne una. Per impostazione predefinita i browser rientrano le descrizioni.

Gli elenchi compaiono dove forse non te li aspetti. Il menu in cima alla maggior parte dei siti è un <ul> di link dentro un <nav>; il CSS dispone le voci in fila e nasconde i punti elenco. Anche una fila di schede prodotto o una serie di risultati di ricerca spesso è un elenco. Quando vedi un gruppo di cose simili, chiediti se è un elenco; di solito la risposta è sì.

Un modo rapido per scegliere fra i due: immagina di mescolare le voci. Se mescolarle cambia il significato, come succederebbe con i passaggi di una ricetta o una top ten, l'elenco è ordinato e richiede <ol>. Se non cambia nulla, come in una lista di cose da mettere in valigia, usa <ul>. Tieni ogni voce breve e inizia le voci con la stessa costruzione grammaticale, così l'elenco si scorre facilmente.