Non è sicuramente la parte più divertente di HTML5, ma una delle nuove funzioni più importanti, pronta per essere usata subito indipendentemente dal browser dei vostri visitatori, è rappresentata dai nuovi tag semantici e dalla struttura che formano una parte della
specifica HTML5. Non è affascinante, ma la semantica è molto importante per diversi motivi: migliore ottimizzazione dei motori di ricerca, contenuti più accessibili, struttura di più facile comprensione e migliore gestione, solo per citarne alcuni. Iniziamo definendo un markup semantico.
Cosa significa esattamente markup semantico?
In parole semplici, la semantica è lo studio del significato del linguaggio. In HTML, il significato del linguaggio riguarda i tag usati per definire i contenuti. Per esempio, un tag indica che il contenuto al suo interno è una voce di un elenco, mentre un tag indica che il contenuto contrassegnato da esso è un paragrafo. Per questo motivo, il markup semantico non riguarda
altro che l’uso dei tag che descrivono accuratamente il tipo di contenuto.
Cosa è cambiato con HTML5?
Uno dei problemi di HTML sin dalla sua adozione da parte dei designer (piuttosto che degli
scienziati che lo hanno progettato), è il suo limitato numero di tag e il fatto che alcuni di essi, in
particolare il tag , devono farsi carico di numerose operazioni diverse. Come designer tendiamo a usare un tag per contrassegnare i menu di navigazione, un altro per una barra laterale, un terzo per l’header della pagina e così via. Identifichiamo ciascuna di queste aree usando per il una classe o un id, ma questi nomi sono arbitrari e variano da designer a designer secondo le loro preferenze personali o i loro studi. Inoltre, alcuni tag vengono sfruttati per scopi diversi da quello per cui sono stati progettati in origine. Un ottimo esempio è l’umile tag table che, per circa una decina d’anni, è stato usato dai designer come principale strumento di layout. Il tag table era stato progettato per ospitare i dati delle tabelle, ma i designer hanno rapidamente capito che potevano inserire in una tabella immagini divise in sezioni allo scopo di creare layout che prima dei CSS non era possibile realizzare. La conseguenza di tutto questo è stato un codice senza senso difficile da gestire e senza alcuna relazione con il contenuto a cui si riferiva. Anche se abbiamo superato il problema di , grazie al tag e ai CSS, HTML5 aspira a risolvere la questione più ampia del markup indefinito fornendo i tag semantici, come
per il pragrafo, orientati alle caratteristiche di contenuto più comunemente usate in una pagina web. Quindi in HTML5, invece di creare un header usando il codice …, ora potete sfruttare il tag semantico. Analogamente, sono
stati introdotti tag per , , , e . Tutti questi tag offrono
un nuovo metodo per descrivere il contenuto che ospitano, in modo coerente e universale.
Perché è importante?
Dal punto di vista dell’ottimizzazione dei motori di ricerca, l’uso di tag universali che
descrivono il contenuto è un grande vantaggio; questi tag aiutano gli spider a stabilire i
contenuti più importanti della vostra pagina e di conseguenza dell’indice. In effetti state
dotando il vostro contenuto di un set migliore di segnaposto che i motori di ricerca saranno
felici di sfruttare.
Tuttavia, non è solo una questione di macchine! L’approccio semantico al codice aiuta
molto anche gli screen-reader, consentendo ai visitatori diversamente abili, che si affidano a
software specializzati, di navigare e scorrere i contenuti sul web per arrivare in modo più facile
ed efficace ai vostri contenuti. Adottando questi nuovi tag, state potenzialmente aprendo le
porte del vostro sito web a un maggior numero di visitatori che in passato erano penalizzati
da una serie di tag .
Come usarli?
Potete iniziare a usare subito i nuovi tag, senza alcun effetto collaterale sui browser più vecchi,
sfruttando uno script come HTML5Shiv per costringere i browser obsoleti a comprendere i
nuovi elementi. I vantaggi non sono visibili a occhio nudo, ma in questo modo vi assicurate
che il vostro sito sia sempre attuale, anche dopo l’introduzione della prossima generazione di
browser.
