Headings


Lezione 9 / 29

Headings

Di Vincenza Neri


tag HTML html5

Continuando la nostra esplorazione dei tag propri del linguaggio html, è impossibile prescindere dalla spiegazione dei tag headings.

Molto banalmente, i tag headings (ad esempio <h1></h1>, ma per comodità li definiremo “gli h”) sono utilizzati per definire titoli e sottotitoli in una pagina html.

I motori di ricerca usano proprio i titoli per indicizzare la struttura e il contenuto delle pagine web.

Oltre all’esigenza organizzativa piuttosto ovvia che vanno a soddisfare nell’atto stesso della scrittura, questi tag sono estremamente utili lato SEO (una delle cose che Google e gli altri motori di ricerca considerano per determinare il contenuto di una pagina sono le parole che compaiono all'interno di questi tag; perciò, se stai tentando di posizionarti per particolari parole o frasi, è davvero un'ottima strategia includere tali parole e frasi nei tag h), ma soprattutto nel facilitare e migliorare l’esperienza dell’utente che visita un sito. 

Le prime cose che un utente nota, infatti, scorrendo velocemente una pagina web ( ricordiamoci che, ad oggi, la soglia dell’attenzione dei fruitori è molto bassa) sono proprio i titoli : ti ci rispecchi, eh?
Proprio per questo è importante utilizzare i diversi tag headings per mostrare, a colpo d’occhio, la struttura gerarchica della tua pagina web.
Cerchiamo di capire meglio questo concetto.

L'HTML definisce sei livelli di headings. Ciò significa che abbiamo a disposizione ben 6 tag per inserire i nostri titoli. Questi tag sono h1, h2, h3, h4, h5 e h6, espressi in ordine decrescente di importanza.

h1 verrà utilizzato come titolo principale, il più importante. Attenzione! Può esistere un solo h1 per pagina html.

h2 si userà, invece, per intitolare le sezioni più importanti all'interno del contenuto globale.

h3 andrà ad intitolare le sottosezioni.

e così a scalare, fino ad arrivare all’ h6, il meno importante.

 Per adoperare al meglio questa funzione gerarchica, ad aiutarci subentrano anche le dimensioni dei nostri tag headings : l’h1, più importante, infatti, sarà anche il più grande, e così a scalare fino al più piccol o h6. Impossibile sbagliare!