I titoli in HTML

Spesso mi capita di visualizzare, per analisi della concorrenza o semplice curiosità, il codice HTML di altri siti web e ho notato diversi utilizzi impropri dei tag utilizzati per segnalare la presenza di un titolo. In questo articolo cercheremo di fare un po’ di chiarezza sulla loro identità ed utilizzo.

Come funziona il tag per i titoli


In HTML i titoli vanno indicati con il tag hN, dove N rappresenta un numero compreso tra 1 e 6, quindi potremo avere h1, h2, h3, h4, h5 o h6.

Questo elemento è uno dei più importanti di una pagina HTML, soprattutto dal punto di vista SEO. Se usato correttamente, infatti, riassume il contenuto di ciascuna sezione della pagina e i motori di ricerca possono comprendere rapidamente l’argomento trattato. Per questo motivo è importante mostrare particolare cura nella stesura dei titoli e nel loro impiego all’interno di un sito web.

Ecco qui come potresti scrivere il titolo principale della tua pagina:



Semplice, no?

L’ordine è importante


Uno degli errori più comuni consiste nel non rispettare l’ordine di importanza dei titoli. La presenza di un numero subito dopo la lettera h, infatti, non è casuale, anzi, è fondamentale! Il valore compreso tra 1 e 6 indica l’importanza del titolo all’interno della pagina e la sua relazione con gli altri titoli.

Nell’ordine avremo quindi:
h1-> il testo contenuto in questo tag costituisce il titolo principale della pagina. A differenza degli altri titoli (h2, h3, h4, h5, h6), che puoi utilizzare più volte nella stessa pagina, indicare più di un h1 è assolutamente sbagliato.
h2 -> è il sottotitolo di h1
h3 -> è il sottotitolo di h2
h4 -> è il sottotitolo di h3
h5 -> è il sottotitolo di h4
h6 -> è il sottotitolo di h5

In sostanza, più il numero indicato nel tag sale, minore sarà l’importanza del titolo. Immaginiamo ora una struttura di esempio.



Come puoi vedere, il titolo principale della pagina è contenuto nel tag h1, i suoi due sottotitoli contraddistinguono le due principali sezioni della pagina e sono indicati come h2. Ciascun h2 ha dei contenuti, a loro volta distinti in più sezioni. Gli h3 sono le sottosezioni ed i sottotitoli degli h2, quindi troviamo un h4, sottotitolo di h3, due h5, sottotitoli di h4 e, per ultimo, h6, sottotitolo di h5.

Non è corretto inserire un h2 prima di un h1, ad esempio, né tantomeno indicare un sottotitolo di h3 con un h5 in assenza di un h4 tra i due.

HTML per la struttura, CSS per la formattazione


Non lasciarti ingannare dalla rappresentazione dei tag h1-h6 all’interno dei browser. Questi vengono infatti mostrati di default a dimensioni differenti, perché ciascun browser ha una formattazione CSS predefinita. Il titolo inserito all’interno dell’h1 apparirà quindi più grande dell’h2, che sarà a sua volta più grande dell’h3 e così via. Non scegliere assolutamente i tag h1-h6 per questo motivo! La formattazione di default dei browser può essere facilmente resettata o sovrascritta con un foglio di stile CSS personalizzato, come vedremo in un articolo dedicato. Ricorda sempre che l’HTML indica la tipologia di contenuto all’interno della pagina, quindi utilizza sempre i tag h1-h6 per il loro significato semantico, come descritto nel paragrafo precedente, non per formattare il testo. Per quello esiste il CSS.

Questo articolo ti è piaciuto? Condividilo con i tuoi amici!

Commenti

Il tuo giudizio è importante! Commenta qui sotto.

Lascia per primo un commento sull'articolo!

Iscriviti alla newsletter

Ho letto e accetto l'informativa sulla privacy.

Icona caricamento

. . .