Fino ad ora ci siamo occupati di tutto ciò che concerne l'head: ora, finalmente, spostiamoci nel body! Occupiamoci, quindi, del contenuto vero e proprio della nostra pagina html!
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.
Quello che vorremmo farti capire è che, prima ancora di immaginare come il motore di ricerca valorizzerà o penalizzerà la tua pagina web, devi imparare ad essere tu, per primo, un buon cittadino del web: è essenziale, dunque, che tu capisca che gli headings servono ad evidenziare quelli che saranno i titoli della tua pagina, per facilitare innanzitutto l'esperienza del fruitore che la naviga. Di conseguenza, dato che i motori di ricerca usano proprio i titoli per indicizzare la struttura e il contenuto delle pagine web, capirai che, se questo aspetto non è ben curato, ti penalizzeranno lato SEO. Dunque, è normale che ogni pagina abbia un solo <h1>, ad esempio, perchè il titolo più importante di una pagina sarà sempre e soltanto uno. Prova ad immaginare quanto sia potente un buon utilizzo deglil headings, ad esempio, per un fruitore non vedente!!!
Quindi, tu avrai un vantaggio lato SEO ogni qualvolta che farai qualcosa che ti renderà un buon cittadino del web: un vero e proprio premio!
Tirando le somme, quindi, 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 il focus principale è quello di 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 delle informazioni nella 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. Ricorda! Da buon cittadino del web, per il discorso di cui sopra, devi ricordare che va inserito 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 informativa, ad aiutarci subentrano anche le dimensioni dei nostri tag headings: dal lato utente dobbiamo fare in modo che l’h1, più importante, sia anche il più grande, e così a scalare fino al più piccol o h6. Questo solitamente avviene già grazie allo stile dato di default dal browser, ma qualora non dovesse essere così, saremo noi ad impostare lo stile in questo modo: Impossibile sbagliare!
