Nel corso delle scorse guide abbiamo visto diversi tag che danno un senso (semantico) al nostro contenuto.
Andiamo, adesso, invece, ad esplorare dei nuovi tag, introdotti in html5, con il solo ed unico scopo di evidenziare il valore semantico del contenuto: sono i cosiddetti, appunto, tag semantici. Questi tag non hanno una differenza nella resa visiva del contenuto che abbracciano, ma vanno a conferirne un significato ben preciso, che fa mutare proprio il senso di ciò che stiamo scrivendo.
I tag semantici agiscono sul sema, sul senso, sul significato che il motore di ricerca scansionerà per andare ad indicizzare la pagina web; in altre parole, un tag semantico è un tag che descrive al motore di ricerca – ma non solo! Pensiamo sempre, ad esempio, all'ear reader! – il contenuto di quella parte di pagina html, facilitandogli di molto la vita!
È proprio in tal senso che dicevamo, nelle scorse guide, che un tag semantico agevola la SEO.
Ora, finalmente, ti è chiaro? Bene!
Fino ad ora abbiamo visto alcuni esempi di tag semantici, seppur non avendo assoluta padronanza del concetto: è stato il caso, ad esempio, degli headings ( i famosi “tag h” ) e degli altri tag di formattazione del testo (pensiamo al tag <strong></strong> oppure al tag <em></em>), così come di quelli inerenti all’inserimento di immagini (<figure></figure> o <figcaption></figcaption>) e via discorrendo.
Ciò di cui non ti abbiamo parlato, però, è l’anatomia di una pagina web, vale a dire la suddivisione che viene attuata su macro-sezioni della nostra pagina html, proprio attraverso alcuni tag semantici.
Vediamoli insieme.
Possiamo dire, in linea generale, che la nostra pagina web viene suddivisa, essenzialmente, in 6 macro-sezioni, delineate da altrettanti tag semantici:
HEADER – l’intestazione della pagina, al cui interno, in genere, è contenuto l'h1. È la prima cosa che visualizzerai aprendo un sito web.
NAVBAR (NAV) – la barra di navigazione (per intenderci, è quella parte dove nei siti visualizzerai le scritte “home” “chi siamo” “lavori” “contatti” ecc)
SECTION – la sezione di contenuto ben definito, ben delineato (un esempio? Laddove andremo ad esplicare il “chi siamo” avremo creato una section); la section può contenere uno o più article.
ARTICLE – specifica un elemento concettualmente separato dal resto della pagina web e dovrebbe essere possibile leggere il suo contenuto indipendentemente dal resto della pagina stessa; è contenuto nella section.
ASIDE – fanno parte dell’<aside></aside> tutti i contenuti che sono solo di supporto all’argomento principale della pagina (un esempio potrebbero essere i video consigliati di youtube); banalmente, un contenuto meno importante del principale andrà avvolto da questo tag semantico.
FOOTER – posizionato rigorosamente alla fine della tua pagina web, contiene i dati generici della società (partita iva, codice fiscale, location ecc) e altre informazioni utili come i link ai social, i contatti ecc.
Ciascuno di loro necessità di un tag di chiusura.
Tuttavia, i tag semantici non si limitano a quelli che definiscono la struttura anatomica del nostro sito e a quelli citati fino ad ora.
Ne esistono di altri, non meno importanti:
DETAILS e SUMMARY – l’uno il tag padre dell’altro: il tag <details></details> definisce un contenuto addizionale che può essere mostrato o nascosto a piacimento dall’utente; il tag figlio <summary></summary> si usa per fornire un riassunto del contenuto del tag details.
MAIN – il contenuto principale di tutto il documento, il contenitore di tutto, ad esclusione della navbar e del footer.
TIME – nomen omen, questo tag viene utilizzato per indicare una data sul nostro sito web.
Questi sono i tag semantici che vale la pena conoscere per scrivere il tuo codice nella maniera più efficace, organizzata e performante a livello SEO, tutti quelli che, insomma, devi tenere bene a mente quando ti chiedi come creare un sito web.
E a te, ne vengono in mente altri?
