Sappiamo già cos'è l'(X)HTML e conosciamo anche i vantaggi del suo uso come markup.
Sappiamo scrivere codice validato secondo il W3C e usare i CSS per presentare la nostra pagina web. Ma siamo sicuri di aver usato i tag (X)HTML nel modo corretto? E soprattutto qual è questo modo?
I tag e il loro valore semantico
Cosa vuol dire “valore semantico”? Significa dare un significato univoco e ben preciso ad un elemento della pagina. Significa utilizzare i tag per l'uso per il quale sono stati creati, senza snaturarli per motivi tecnici. Significa facilitare la navigazione a tutti e rendere il codice accessibile, una delle maggiori priorità per un web designer.
L'importanza della semanticità del codice è stata rafforzata proprio dall'evoluzione dell'HTML in XHTML. Il secondo, infatti, nato dalla fusione di HTML e XML, tenta di rendere il codice un metodo per definire la struttura di un sito e non la sua presentazione grafica, affidata invece ai CSS. Non devono essere presenti infatti nel documento XHTML gli attributi di presentazione normalmente associati ai tag, che vengono affidati invece al file CSS esterno o a stili inclusi nella <head> della pagina.
Ora il codice, rispondendo ad un'etica puramente di presentazione del contenuto, dovrebbe essere dunque “pulito” da questi tag presentazionali (quali <font>, <span style...>, etc), pertanto:
<p>sarà il nostro paragrafo<h1>,<h2>, etc, saranno i nostri titoli<ul>, <ol>, <dl>e i singoli elementi relativi saranno le nostre liste, e come tali usati anche per la struttura dei menu di navigazione<blockquote>, <abbr>, <cite>andrebbero usati per le citazioni di testo<a>per ancore e i comuni link ipertestuali<table>per intabellare e formattare i dati<strong>e<em>per evidenziare testo in grassetto o corsivo<div>come blocco di divisione della struttura, che esso racchiuda una colonna, un piè di pagina o altro blocco del sito.
E ci siamo limitati a citare i più importanti.
I <div> formano la struttura principale del sito...
...ed è pertanto utile che la semanticità del codice si manifesti dando ai <div> dei nomi utili a capirne l'utilità e non l'aspetto presentazionale del documento (X)HTML.
Ad esempio, in un documento come questo:
... <body> <div id="fasciasuperiore"></div> <div id="contenitore"> <div id="sinistra"></div> <div id="navigazionedestra"></div> </div> <div id="footer"></div> </body> </html>
c'è un errore fondamentale che è quello di aver usato dei nomi che identificano troppo chiaramente la posizione e quindi l'aspetto presentazionale dei vari <div>. È invece più utile e semantico identificare i vari div con il loro valore, significato, utilità all'interno della pagina. Sarebbe più corretto quindi in questo esempio scrivere:
... <body> <div id="testata"></div> <div id="contenitore"> <div id="pagina"></div> <div id="menu"></div> </div> <div id="footer"></div> </body> </html>
Le classi e gli errori più comuni
Stessa cosa dicasi quando assegniamo delle classi ai tag. Identificare ad esempio un <h2> con una classe con il nome “rosso”, oltre che a portare confusione nel caso il nostro cliente decida che quel tag non deve essere più rosso, ma blu, porta gran confusione anche a noi che ci lavoriamo e che non ricordiamo più a cosa si riferisce quel “rosso”: se ad un'intestazione di un articolo, o un titolo di un box o ancora l'intestazione di una lista.
Ma queste sono solo convenzioni, che siamo liberi o meno di seguire, a scapito della facilità del nostro lavoro. È invece tornando alla purezza dei tag che dobbiamo tornare a parlare di semanticità.
Usabilità, accessibilità e indicizzazione sui motori di ricerca
Questi i tre principali vantaggi dell'uso corretto e semantico del codice (X)HTML.
Usabilità, poiché la pagina HTML pura e semplice, senza file CSS, risulta comunque navigabile e leggibile, rendendo fruibili tutti i testi, titoli e link.
Accessibilità, poiché gli utenti disabili, o anche solo chi naviga tramite supporto palmare o al contrario con browser obsoleti che non supportano i CSS, possono accedere alle informazioni del vostro sito in modo diretto e semplice.
Indicizzazione: ebbene sì, un uso del codice semantico influisce positivamente sull'indicizzazione. Tutto ciò che è contenuto in un titolo, in una lista, o evidenziato con lo <strong> nel paragrafo, assume importanza per Google esattamente nello stesso ordine e importanza in cui gli viene presentato strutturalmente. Non assumerà infatti più enfasi, né per un non vedente né per Google (che si dice sia il primo utente cieco del web) un titolo scritto in bold rosso carattere 16 pixel se questo non è semanticamente evidenziato ad esempio con un <h1>.
Allo stesso modo non sarà rilevante per uno screen reader (il supporto tecnologico adibito appunto alla lettura dei documenti (X)HTML per i ciechi) un menu strutturato a paragrafi piuttosto che in una lista, magari denominata con un id=”menu_principale”. Stessa cosa per Google.
Un sito semanticamente ben fatto e correttamente validato avrà inoltre una sitemap più chiara ed efficace, ed eccoci di nuovo a parlare di indicizzazione.
Innegabile quindi come un sito semanticamente corretto abbia tutti questi vantaggi, perciò sfruttiamoli e usiamo il codice nel modo corretto.
