Chiunque sia coinvolto nel web design o nello sviluppo avrà imbattuto il termine "semantico" con riferimento a HTML5 e al Web in generale. Questo termine spesso problematico è comprensibilmente fonte di confusione per molti di noi, in particolare perché vi è una netta mancanza di consenso sulla sua definizione in determinati contesti.

In questo articolo, esploreremo ciò che rende HTML5 più semantico rispetto ai suoi predecessori, delineando ciò che questo significa per lo sviluppo Web ora e in futuro.

La semantica riguarda il significato

Il concetto di semantica deriva dal campo della linguistica dedicato allo studio del significato. Con linguaggi naturali come l'inglese, distinguiamo tra sintassi (o grammatica) e significato. Se pensi a una frase, il significato ha a che fare con il modo in cui la gente lo interpreta:

"L'uomo ha gettato il computer attraverso la finestra."

La semantica riguarda l'aspetto della frase che consente alle persone di leggerlo per comprendere il messaggio contenuto al suo interno. Insieme alla sintassi, la semantica è una parte importante di ciò che facilita la comunicazione tramite il linguaggio. Quando parliamo di semantica in relazione all'HTML, stiamo parlando di comunicazione tra programmi informatici, non umani. L'HTML semantico è essenzialmente finalizzato a migliorare la misura in cui le applicazioni possono elaborare o interpretare i contenuti Web. Ad esempio, si consideri il seguente estratto della pagina Web contenente alcune delle strutture HTML di più lunga durata:

The man threw the computer through the window.

Gli elementi (e gli attributi) forniscono al browser informazioni su come presentare il contenuto all'utente. Gli elementi di paragrafo verranno visualizzati per impostazione predefinita con spazi bianchi sopra e sotto di essi, gli elementi di immagine vengono visualizzati utilizzando il file di immagine incluso nell'attributo src e così via. Quando il browser incontra ognuno di questi elementi, esegue il rendering del contenuto in un modo particolare che viene determinato in ultima analisi dai tag utilizzati.

Le strutture HTML hanno già un significato

È importante capire che HTML5 non introduce la semantica in HTML per la prima volta. L'HTML aveva già un livello di semantica integrato. Le strutture HTML esistenti sono significative a vari livelli. Se guardi questo familiare elemento HTML incluso nell'estratto sopra, vedrai cosa intendo:

Sebbene sia abbreviato, il nome dell'elemento img indica qualcosa di significativo sul contenuto del tag, cioè che è un'immagine. In questo modo, si può pensare all'aspetto semantico dell'HTML come simile ai metadati, in quanto il nome dell'elemento e il nome dell'attributo descrivono i dati (i dati in una pagina Web sono l'elemento e il contenuto dell'attributo).

Ricordi quando abbiamo iniziato a separare i contenuti dallo stile?

Alcune delle strutture che abbiamo usato in HTML dicono al browser come modellare gli elementi di contenuto in una pagina. Con il passare del tempo, siamo stati incoraggiati a separare la formattazione di una pagina dal suo contenuto.

Ad esempio, abbiamo sostituito il tag i con em, che è più significativo e non dice al browser esattamente come visualizzare il testo all'interno dell'elemento. Lo scopo dell'utilizzo di em anziché di i è quello di trasmettere informazioni sulla natura dell'elemento di contenuto, piuttosto che informazioni su come definirlo. Ovviamente, ciò influisce sullo stile, che è il motivo principale per cui lo usiamo, tuttavia lascia i dettagli dello stile fino al browser e / o al codice CSS idealmente separati dal markup della pagina.

L'HTML5 semantico è un passo più grande in questo processo. L'obiettivo finale è quello di creare un sistema in cui le applicazioni abbiano accesso a un più alto livello di significato - non si tratta di intelligenza artificiale, ma di includere informazioni descrittive sugli elementi di dati all'interno delle strutture di codice che li modellano.

Non è simile a XML?

Se hai usato XML in passato, avrai una certa familiarità con i concetti nel markup semantico. Ad esempio, quando si progetta un documento (o uno schema) XML per un set di dati, si scelgono elementi e attributi per modellare gli elementi all'interno dei dati. Idealmente i nomi di elementi e attributi definiscono gli elementi di dati in modo significativo:

Jim Smith23 November 2012

Lo sviluppatore qui ha scelto nomi che descrivono intuitivamente i valori dei dati che vengono modellati. Con HTML5 non puoi scegliere i tuoi elementi, poiché non è liberamente estensibile. Le strutture scelte per questo hanno semplicemente un significato più intrinseco rispetto alle versioni precedenti.

A proposito, ci sono diversi tipi di significato

Abbiamo parlato di significato, ma in realtà ci sono diversi modi in cui un elemento o un altro estratto di codice può essere significativo.

Il tag img è significativo in quanto dice qualcosa sul contenuto dell'elemento, descrivendo di cosa si tratta.

Alcuni dei nuovi elementi HTML5 come intestazione e piè di pagina hanno un significato in quanto indicano qualcosa sul ruolo o lo scopo dell'elemento all'interno della struttura generale di una pagina.

In che modo tutto questo riguarda il codice HTML5?

Quindi, cosa comporta questo aspetto significativo potenziato di HTML5? Essenzialmente HTML5 ha alcuni nuovi elementi con cui puoi includere più informazioni semantiche nel tuo markup della pagina. Ci sono un sacco di nuovi elementi, solo alcuni dei quali vedremo qui. Il tag header indica informazioni sul contenuto dell'elemento e sul suo ruolo all'interno della struttura della pagina:

Man in Window Outburst

L'elemento di intestazione può contenere altri elementi e tende ad includere almeno un elemento di intestazione. Il tag footer è simile, con il tag che esprime nuovamente qualcosa di significativo sul contenuto dell'elemento e sulla sua relazione con il resto della pagina:

Il tag nav descrive lo scopo di una sezione di pagina, cioè che contiene collegamenti di navigazione:

L'elemento di sezione contiene in genere un gruppo di elementi sullo stesso tema, spesso insieme a un'intestazione. L'elemento sezione ha un significato abbastanza astratto, ma è comunque significativo:

What happened
Police officers apprehended the man at 3.30pm...

L'elemento article è simile, utilizzato per definire un elemento che è autonomo:

The Law
The law on throwing items through windows is very clear...

Un tag aside indica il ruolo di un elemento relativo al suo contesto all'interno della pagina, come nella seguente versione estesa del codice articolo sopra:

The Law
The law on throwing items through windows is very clear...

Questi sono solo alcuni dei nuovi elementi HTML5 che offrono miglioramenti semantici, altri includono elementi multimediali e di input dell'utente, nonché attributi aggiuntivi. L'inclusione di micro-dati in HTML5 offre anche maggiori possibilità di includere informazioni semantiche nelle pagine Web e nelle applicazioni. Come puoi vedere, alcuni di questi nuovi elementi sono significativi in ​​termini di contenuto e struttura.

Pensa ad alcuni dei vecchi tag (molti dei quali sono ancora in circolazione), come ad esempio div. L'elemento div è semplicemente un blocco di una pagina: il nome del tag non ci dice assolutamente nulla sul contenuto dell'elemento o sul suo ruolo all'interno della pagina. In altre parole, il tag trasmette un significato molto piccolo. Molti dei tag di vecchia data non trasmettono praticamente alcun significato, o in alcuni casi hanno un significato generico e definito genericamente. Ogni elemento in una pagina Web era contenuto in una serie di elementi molto generali. La chiave per rendere qualcosa di significativo è essere specifici. I nuovi tag HTML5 ci consentono di definire il contenuto Web utilizzando termini più specifici.

Stavi già aggiungendo un significato al tuo markup?

Se hai creato pagine Web per un periodo di tempo ragionevole, alcuni dei nuovi elementi HTML5 potrebbero suonare alcune campane per te. In realtà, gli sviluppatori stavano già costruendo un livello di significato nelle loro pagine usando gli attributi dell'elemento, in particolare classe e ID. Ad esempio, se hai mai assegnato a un elemento un attributo di classe o ID di "piè di pagina" o "intestazione", non sei certo il solo. Con HTML5, questo significato è convogliato nel markup stesso piuttosto che nei valori degli attributi. Se si utilizzavano questi attributi per implementare particolari proprietà di stile, si stava effettivamente facendo qualcosa manualmente che è incorporato in HTML5, e con elementi semantici ci sono ulteriori vantaggi ...

Perché stiamo facendo tutto questo?

OK, questo è tutto molto bene, ma ti verrebbe perdonato per aver chiesto perché stiamo andando a tutti questi problemi per qualcosa che sembra essenzialmente concettuale / accademico. Bene, puoi star certo che ci sono buone ragioni per muoverci in una direzione più semantica. Come abbiamo visto, la semantica HTML5 ci consente di creare codice di markup che descrive gli elementi di contenuto. Questo aspetto descrittivo del codice consente ad altri programmi di utilizzare più efficacemente il contenuto, con varie applicazioni:

• La ricercabilità è destinata a essere trasformata dall'avanzamento della semantica web. Il markup semantico rende il contenuto / i dati più ricercabili. le pagine Web non vengono solo visualizzate nel browser Web, ma vengono elaborate anche da altri programmi come i robot dei motori di ricerca. Poiché la marcatura semantica è progettata per consentire alle applicazioni di interpretare le pagine Web in modi più significativi, ciò dovrebbe in definitiva migliorare la qualità delle funzioni di ricerca / interrogazione di una quantità significativa. Nel "sogno" di Tim Berners-Lee spesso citato per il Web, i computer sarebbero in grado di analizzare tutti i dati online - potrebbe essere molto lontano, ma la spinta semantica di HTML5 è motivata da quel tipo di obiettivo a lungo termine .
• L'accessibilità è uno dei vantaggi chiave del markup semantico. Gli strumenti di accessibilità possono trarre enormi vantaggi da un accesso più significativo ai contenuti Web. Tali strumenti includono componenti aggiuntivi del browser per utenti con problemi di vista, udito, difficoltà di apprendimento e così via. Il markup semantico rende più fattibile un'applicazione per elaborare il contenuto Web e il risultato per comunicare all'utente il messaggio originale in modo adeguato alle proprie esigenze. Questo concetto si estende oltre l'accessibilità e nei regni della flessibilità del dispositivo, attraverso tecniche come la progettazione reattiva. Il risultato è un approccio più inclusivo alla distribuzione di contenuti web.
• La coerenza dovrebbe essere un vero benefattore di HTML5 semantico. Il markup semantico migliora la coerenza, poiché gli elementi di contenuto sono più logicamente assegnabili a particolari tipi di elementi. Ciò è in contrasto con i vecchi modelli, in cui gli oggetti spesso potevano essere contenuti logicamente in una qualsiasi gamma di diversi tipi di elementi: la scelta di uno non era un indicatore della natura del contenuto o del suo ruolo all'interno della pagina, era solo un riflesso della scelta dello sviluppatore. Con il markup semantico, il livello più specifico di significato rende queste scelte meno libere, ma i risultati sono intrinsecamente più affidabili quando si tratta di interpretazioni del browser o di altre applicazioni.

Gli sviluppatori guidano il progresso delle tecnologie Web

Quando ero all'università (un certo numero di anni fa) ricordo un docente che ci diceva che il campo della ricerca accademica sarebbe stato rivoluzionato dai progressi nella ricerca. Stava parlando del Web semantico, inutile dire che non è ancora successo. Prendendo qualsiasi tipo di nuova direzione focalizzata con qualcosa di così diverso ed erratico come il World Wide Web sarà sempre un compito difficile. Tuttavia, accettando almeno l'idea del markup semantico, noi sviluppatori possiamo agire per influenzare il movimento verso un Web futuro che sia più accessibile, ricercabile e coerente per tutti gli utenti.

Usi gli elementi semantici di HTML5? Concentrarsi sulla semantica produce un prodotto di qualità superiore? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano / miniatura, utilizza l' immagine della lingua via Shutterstock.