Perché eliminare dal codice HTML (o XHTML) gli elementi di presentazione



Cerchiamo ora di capire perché, se si vuole favorire l'accessibilità, conviene abbandonare l'abitudine di specificare la presentazione per mezzo di HTML o XHTML, adoperando in loro vece gli opportuni comandi CSS. I motivi sono più d'uno.

  • In primo luogo, definire la presentazione per mezzo dei CSS consente di ridurre il peso della pagina, talvolta del 50-60% o anche più: già questo rappresenta un grosso vantaggio per l'accessibilità.
  • In secondo luogo, l'uso dei CSS consente di specificare una serie di presentazioni alternative, ciascuna adatta alla riproduzione su una differente periferica (schermo, stampa, sintetizzatori vocali, ecc.), mentre l'uso di elementi e attributi di presentazione dell'HTML favorisce essenzialmente la sola riproduzione su schermo.
  • In terzo luogo, demandare la presentazione ai CSS consente di ottenere un codice HTML più lineare e pulito, e di evitare per esempio il ricorso ad artifici sconsigliati per l'accessibilità, quali le tabelle usate a scopo di impaginazione.

Per dimostrare che i tre motivi sopra addotti sono fatti reali e non articoli di fede, proponiamo nelle lezioni seguenti un esempio pratico: una stessa pagina web riprodotta in due versioni, la prima formattata utilizzando esclusivamente elementi e attributi di presentazione dell'HTML, la seconda utilizzando al loro posto i CSS. Si vedrà che, al medesimo aspetto grafico visualizzabile per mezzo dei browser più diffusi, si accompagneranno, nella versione CSS, una maggiore leggibilità da parte di differenti programmi utente, un minor peso in Kb, una struttura del codice più semplice e comprensibile.

Ecco dunque nell'immagine seguente l'aspetto di questa pagina di esempio, come appare se visualizzata con un qualsiasi browser di tipo grafico.

Figura 1 L'aspetto grafico di una pagina di esempio realizzata in due versioni: 1) tramite l'uso di elementi e attributi di presentazione dell'HTML; 2) tramite i CSS2

tralasciando l'impaginazione, volutamente spartana per mettere in maggiore evidenza i blocchi strutturali della pagina, si tratta – come si può facilmente notare – di una classica struttura a tre colonne centrali, più testata e pie' di pagina, tipica di migliaia e migliaia di siti che si occupano di informazione e di divulgazione.

Ultimi articoli Web design

Metro, il "linguaggio di design" di Windows 8

I principi ispiratori del "linguaggio di design" utilizzato da...

Bootstrap: il framework di Twitter

Sviluppare applicazioni web sfruttando il framework con cui è stato...

Sfondi a tutta pagina con jQuery

Come avere degli sfondi a tutta pagina sui vostri siti web, per...

Grid design, dalla tipografia al web

Design coerenti e layout consistenti, usando principi di...

Art Direction e Design

Capire la differenza tra la direzione artistica di un progetto e il...

Altri articoli

Guide Web design

Guida Progettazione siti web

Dall'analisi dei requisiti fino allo sviluppo e alla promozione:...

Guida Pubblicare un sito web

Le verifiche fondamentali da effettuare prima del lancio di un nuovo...

Guida Web Writing

Saper scrivere per il Web è una delle armi per attirare utenti e per...

Altre guide

Newsletter @Grafica e Web Design

Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti