Tutti i web designer di oggi, dal fai da te al professionista del settore, devono fare i conti con la creazione di un codice HTML semanticamente corretto, e in questo articolo intendo spiegarvi cosa si intende per HTML semantico, o HTML semanticamente corretto, e quali benefici può portare all’intero sviluppo web.

Che cos’è l’HTML semantico

La semantica è la scienza che studia il significato, di come viene generato e applicato ai segni. “Perchè X significa Y?” è una questione di semantica. L’HTML è un linguaggio di marcatura usato per realizzare pagine web, ed è interpretato dai browser web, e da altri tipologie di “agenti”, quali cellulari, motori di ricerca, etc.

L’HTML consiste di due tipologie di elementi:

• i Tag
• il contenuto testuale

Alcuni tag possono essere contenuti di se stessi (vedi le immagini, i filmati in Flash o i metadata), ma la maggior parte è usata per creare una struttura per il contenuto.

L’HTML semantico, o HTML semanticamente corretto, è il linguaggio HTML in cui i tag vengono studiati e selezionati appositamente per il significato del contenuto. Facciamo un esempio! Per creare una pagina che usi un HTML semanticamente corretto:

• Un tag paragrafo (<p></p>) dovrebbe trovare uso solo nel caso di un paragrafo (che è un concetto strutturale) e non per creare uno spazio in una pagina web. Mai usare una serie di tag <p> per creare spazio!
• I tag grassetto (<b></b>) e corsivo (<i></i>) non dovrebbe mai essere usati,  perchè hanno a che fare con la formattazione, ma non con il significato o la struttura del contenuto. Piuttosto, vanno usati i tag (<strong></strong) e (<em></em>) (che significa enfasi), che modificheranno rispettivamente il testo in grassetto o corsivo, aggiungendo anche un significato alla struttura del contenuto.
• I tag HTML non dovrebbe mai essere usati per applicare uno stile grafico, perchè questo è il lavoro principale del CSS (Cascading Style Sheets).

Perchè l’HTML semanticamente corretto è migliore

Scrivere codice HTML semantico comporta notevoli benefici:

• Facilità d’uso
• Accessibilità
• Ottimizzazione per i principali motori di ricerca
• Riutilizzo

Facilità d’uso

Prima di tutto, l’HTML semantico è un HTML pulito e chiaro. E’ decisamente più semplice e immediato leggere e modificare il codice senza aver a che fare con tanti tag extra e stili inline. Scrivere codice in questo modo ci permette anche di risparmiare tempo (e soldi) quando altre persone e/o collaboratori dovranno interagire con esso – ad esempio, uno sviluppatore web che deve implementare la nostra pagina all’interno di un CMS o di una web application. Infine, i file HTML semantici sono naturalmente anche più leggeri, e vengono caricati dai browser più velocemente.

Accessibilità

A meno che non dobbiate interagire con il codice HTML attraverso media diversi da un browser web, non è affatto scontato immaginare che le nostre pagine web hanno una vita anche fuori dalla finestra di Internet Explorer, ma spesso è così, perchè possono essere utilizzate e visualizzate anche da persone o dispositivi in maniere del tutto differenti.

Quando separiamo l’aspetto visuale (in questo caso, lo stile) dall’attuale significato di un documento, finiamo per ottenere un documento che significa sempre la stessa cosa. Cambia il modo in cui è presentato o in cui viene usufruito. Una delle tecniche più comuni tra i web designer è di applicare differenti CSS a seconda dei media usati. Ad esempio, possiamo applicare uno stile per la stampa su carta, un altro per la visualizazione su schermo, e un altro ancora per la visualizzazione su un browser che converte il testo in audio. Questi browser “speciali” riconoscono anche tag come <strong> o <em>, ma li trattano in maniera totalmente differente da un browser classico, cambiando il tono della voce o il volume, piuttosto che il contrasto o lo stile del testo, il che porta comunque allo stesso significato, ma in un contesto differente.

Ottimizzazione sui principali motori di ricerca

Gli spiders e i crawlers dei motori di ricerca, quale Googlebot, rappresenta un altra tipologia di dispositivo capace di interpretare HTML. Questi, inoltre, valutano anche il contenuto di una pagina web, per cercare di apprenderne il significato.

Quando un crawler trova una pagina web, salva un rapporto su ciò di cui tratta la pagina in un database indicizzato, da usare poi nel caso di corrispondenze nelle ricerche web. La domanda principale è: in base a cosa i motori di ricerca danno priorità ai vari termini ricercati sulle pagine risultanti?

Naturalmente, tutti utilizzano sistemi differenti, ma una delle chiave fondamentali dell’ottimizzazione è di usare il caro buon vecchio buon senso. Se fossimo un motore di ricerca, come ci muoveremmo? Se provassimo a immaginare i problemi che incontra un motore di ricerca, ben poche cose sarebbero chiare. Ad esempio, supponiamo di avere 2 pagine web con esattamente lo stesso contenuto (10 Kb). La seconda pagina ha 30 Kb di codice addizionale, markup superfluo fatto di stili inline, molti <div> annidati e immagini decorative. Naturalmente questa pagina apparirà sicuramente più gradevole ad un visitatore (forse), ma se ogni pagina contiene il termine di ricerca “bluebottle” 5 volte, quale pagina sceglieremmo (sempre supponendo di essere un motore di ricerca) come più adatta al risultato di una ricerca con termine “bluebottle”?

Sicuramente la prima pagina, più leggera, per una serie di motivi:

• La densità di keyword di una pagina più leggera è superiore. Ritroviamo infatti il termine 5 volte in 15 kb, al contrario della seconda, dove il termine ricorre 5 volte in 40 Kb. Qualunque sia il codice extra, sicuramente non riguarderà il termine “bluebottle”.
• Il termine apparirà sicuramente più volte più in alto nella pagina leggera che non in quella di 40 Kb. Naturalmente, prima troviamo la parola nel nostro documento, prima vuol dire che quel documento è esattamente quello che stavamo cercando o che il termine riguarda specificamente il contenuto di esso.
• Assumendo che la prima pagina sia scritto con HTML semantico, è probabile che il termine compaia all’interno di un tag di alto valore (quale può essere un tag heading o un link) in questa pagina piuttosto che nella pagina “graficamente ricca” (che potrebbe usare un’immagina come link, senza magari neanche il giusto attributo ALT).

Riutilizzo

Quando il nostro contenuto (ed il relativo significato) è separato dallo stile (CSS diversi a seconda del media), esso potrà essere compreso nello stesso modo da tutti i dispositivi. Questo vale anche per eventuali dispositivi a noi ignoti (come i crawlers automatici che raccolgono i feed RSS su determinati argomenti, oppure motori di ricerca specifici per immagini o video), o altri ancora che non sono stati inventati.

Negli ultimi due anni si è assistito all’uso di una miscelazione di contenuti come una delle principali caratteristiche di siti e applicazioni web. Tutto ciò avviene anche senza la consapevolezza del creatore dell’origine di questi contenuti, ma nella maggior parte dei casi questa libertà di “condivisione” porta solo ed esclusivamente benefici al creatore originale.

Spesso in queste situazioni il contenuto preso da una pagina web è formattato in maniera differente all’interno di una nuova pagina, il che obbliga a rimuovere ogni stile inserito all’interno. (Notare che gli stili inline, applicati quindi direttamente ai tag HTML, sovrascrivono le informazioni provenienti da CSS esterni, quindi dovrebbero essere rimossi sempre).

Ovvio che è decisamente più facile prendere e riutilizzare il contenuto web da altre fonti, e applicarle a vari media, quando questo contenuto non presenta informazioni di stile inserite specificamente all’interno e quando viene utilizzato al suo interno HTML semantico che può aiutare un programma a comprendere il significato e la struttura del contenuto stesso.