VMV Graphic e Web designer >Articoli > Informazioni Utili > Xhtml e semantica un binomio perfetto.

Scrivere una pagina web  in XHTML 1.1 strict usato in maniera sematica serve davvero per due parametri oggi importanti come l’accessibilità e l’indicizzazione? Affrontare in maniera completa i rapporti che intercorrono fra codice XHTML 1.1 strict, semantica e indicizzazione di una pagina web non è un compito semplice. Non è semplice perché è necessario tenere conto di diversi aspetti del suo funzionamento:

    * Contenuto e della struttura;
    * Presentazione;
    * Comportamento.

In questo articolo affronterò le problematiche inerenti la struttura e il contenuto di una ipotetica pagina web scritta in xhtml 1.1. La struttura di un documento xhtml è definita attraverso una serie di tag che servono a "descrivere" la pagina al browser. Alcuni di questi servono a fornire dati prettamente tecnici (metadati e altro), altri servono a "disegnare" la pagina. Di fatto questi tag contengono i diversi elementi della pagina: immagini, testi, link, ecc... Nel codice xhtml, esistono una serie di tag pensati per essere associati direttamente a particolari elementi della pagina.

Gli headings, ad esempio (h1,h2,h3,ecc...), sono stati pensati per dare una struttura logica alla pagina ed essere quindi usati come titoli anche dei diversi paragrafi e sottoparagrafi. E così anche il tag em (Emphatized text), che viene usato per evidenziare una porzione di testo ritenuta importante. Quasi ogni tag ha una sua specificità, come è possibile vedere in questa tabella.

Insieme a questi tag specifici, ne esistono alcuni generici che servono, principalmente, come "contenitore". Questo ci porta alla definizione di web "semantico". In pratica, oltre alla comunicazione data dal contenuto, testo e immagini, della pagina, si spiega anche al browser cosa c’è nel nostro sito direttamente con il codice. Ed oltre al browser, lo diciamo anche ai motori di ricerca.

Tanto più  i tag vengono utilizzati correttamente, secondo cioè la funzione per cui sono nati, tanto migliore sarà la struttura della nostra pagina. Ma cosa vuol dire usare i tag per gli scopi per cui sono nati?
E’ molto semplice. Il div è un contenitore, i tag "h1", "h2", "h3"… etc. sono i titoli, il tag  "p " i paragrafia e via di seguito. Ora appare lampante come costruendo una struttura dove ordinatamente sono composti l’h1 con dentro gli h2 che precedono i "p" etc etc…diventa più semplice per strumenti automatici come i browser o i robot dei motori di ricerca "leggere" la nostra pagina. Sapranno sempre cosa cercare e dove farlo. Come avrete visto nella tabella, i tag sono davvero tanti e trovare le giuste formule semantiche e di accessibilità non è semplice. Però questo lavoro comporta vantaggi importantissimi come scopriremo nel prossimo articolo  “l’Xhtml  e accessibilità”.

Solo dopo essersi curati di avere una struttura xhtml corretta nel nostro sito web ci possiamo occupare della presentazione, cioè della grafica del sito. Come vedremo nei prossimi articoli, una struttura corretta agevola enormemente l’applicazione di CSS,  tenendo conto di tutte le problematiche legate all’uso dei colori e alla scalabilità dei testi e nel rispetto di tutte le specifiche della legge Stanca volte a migliorare l’accessibilità dei siti.

Leggi gli articoli "XHTML e accessibilità" e "XHTML e indicizzazione" in cui affronto il vantaggio dell’utilizzo del codice xhtml nel campo dell’accessibilità e dell’indicizzazioe sui motori di ricerca.