Tag semantici


Lezione 14 / 29

Tag semantici

Di Vincenza Neri


tag seo HTML html5

 Nel corso delle scorse guide abbiamo fatto qualche accenno ai famosi “tag semantici”.

Abbiamo visto, fino ad ora, che i nostri tag possono, infatti, conferire una resa visiva differente quando la nostra pagina html viene renderizzata dal browser. Tuttavia, alcuni tag non si limitano a questa differenza nella resa: vanno a conferire, infatti, oltre ad un aspetto diverso all’elemento che abbracciano, un significato ben preciso, che fa mutare proprio il senso di ciò che stiamo scrivendo

Questo è il caso dei 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 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 è 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, con contenuto testuale (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?
 

Successivo

15 Il tag form