Titoli e paragrafi

L'HTML ha sei livelli di titolo, da h1 a h6, e chi usa uno screen reader salta spesso da un titolo all'altro per orientarsi nella pagina.

Una scaletta fatta di titoli

Pensa a un libro di ricette. Il libro ha un titolo, ogni ricetta ha un nome e ogni ricetta ha parti più piccole, come Ingredienti e Procedimento. L'HTML esprime la stessa scaletta con sei elementi di titolo, da <h1> a <h6>. <h1> è il livello più alto, di solito il titolo della pagina. <h2> segna le sezioni principali, <h3> le parti dentro una sezione, e così via. Alla maggior parte delle pagine non servono mai più di tre o quattro livelli.

<h1>Weekend Baking</h1>
<p>Three simple breads you can make at home.</p>

<h2>Soda bread</h2>
<h3>Ingredients</h3>
<p>Flour, baking soda, salt and buttermilk.</p>
<h3>Method</h3>
<p>Mix, shape into a round and bake for 40 minutes.</p>

<h2>Flatbread</h2>
<p>Ready in 20 minutes, no oven needed.</p>

Scegli il livello in base alla struttura, non alla grandezza

I browser disegnano <h1> grande e <h6> piccolo, ed è forte la tentazione di scegliere un titolo per la sua grandezza. Resisti. Il livello dice ai programmi come è organizzata la pagina. Gli screen reader possono elencare tutti i titoli di una pagina e permettere di saltare direttamente a uno di essi, un po' come un indice. Anche i motori di ricerca usano i titoli per capire di che cosa parla una pagina. Se vuoi che un h2 sembri più piccolo, lascialo h2 e cambiane la dimensione con il CSS.

Due abitudini tengono pulita la scaletta. Primo, usa un solo <h1> per pagina per il titolo principale; lo consiglia MDN ed è ciò che la maggior parte degli utenti si aspetta. Secondo, non saltare livelli scendendo: dopo un h2 viene un h3, non un h5. Risalire va bene, quindi un h3 può essere seguito da un nuovo h2 quando inizia la sezione successiva.

Paragrafi

Il testo corrente va in elementi <p>, uno per paragrafo. Siccome l'HTML comprime gli spazi bianchi, premere Invio due volte nel file non crea un nuovo paragrafo sullo schermo; lo fa solo un nuovo <p>. Per impostazione predefinita i browser aggiungono uno spazio sopra e sotto ogni paragrafo, che il CSS può modificare. Un paragrafo non può contenere un altro paragrafo o un titolo, quindi se dimentichi un </p> di chiusura, il browser lo chiude per te appena inizia l'elemento di blocco successivo.

A volte gli a capo fanno parte del contenuto, come in un indirizzo postale o in una poesia. In quei casi usa <br> alla fine di ogni riga, dentro un unico paragrafo o dentro <address>. Non usare una pila di elementi <br> per creare spazio verticale; quello è un compito dei margini CSS. Per segnare un cambio di argomento dentro una sezione, come un cambio di scena in un racconto, usa <hr>, la separazione tematica, che i browser disegnano come una linea orizzontale.

Citazioni

Una citazione lunga da un'altra fonte va in <blockquote>, che i browser mostrano rientrato. Metti al suo interno i paragrafi citati; puoi indicare l'indirizzo della fonte nell'attributo cite. Una citazione breve dentro una frase usa <q>, e il browser aggiunge le virgolette al posto tuo. L'elemento <cite> segna il titolo di un'opera, come un libro o un film.