Le fait de mélanger le contenu et la mise en page dans le même fichier est devenu un obstacle à l'accessibilité du Web par les divers dispositifs de navigation.
Pour commencer...
Pour illustrer de quoi il sera question dans cet article, je vous propose de voir à quoi ressemble cette page à l'état brut, SANS LA MISE EN PAGE qui lui est associée. Pour revenir, cliquez ensuite sur AVEC LA MISE EN PAGE.
Maintenant que vous avez vu la différence, développons le sujet.
Beaucoup de code pour peu de contenu
Au temps du Web destiné essentiellement aux navigateurs de bureau, les auteurs de pages Web se sont habitués à mélanger le contenu et la mise en page dans le même fichier. Les balises HTML offraient cette possibilité moyennant des attributs qu'on y incluait. Exemple :
<p align="center"> <b> <font color="#FF0000" size="+5"> Bonjour </font> </b> </p>
En clair : un seul mot "Bonjour", centré sur la page, en caractères gras de grande taille et de couleur rouge.
Cette particularité de HTML est devenue obstacle dans le développement du Web accessible à tous. En effet, qu'est-ce qu'un synthétiseur vocal a à faire des informations relatives à la couleur, à la taille et à l'épaisseur de la police ? Pire : pour trouver le contenu qui l'intéresse (ici le mot "Bonjour"), il est contraint de se frayer le chemin à travers le code associé qu'il ne comprend pas et qui peut le faire planter.
Dégraisser les pages Web
Pour permettre la séparation de contenu et de mise en forme, le W3C a inventé le langage CSS (Casading Style Sheet): feuilles de style.
Grâce au CSS, le "Bonjour" de l'exemple précédent peut être codé de manière simple :
<p class="salutation">Bonjour</p>
où class="salutation" renvoie vers la description de la mise en forme qui se trouve dans un fichier à part. Ce fichier n'est sollicité que par les navigateurs qui en ont l'utilité. De coup, le code de la page Web est plus digeste même à l'oeil nu, plus léger (donc plus rapide à parcourir), et plus facile d'accès pour un synthétiseur vocal qui n'a pas besoin de la mise en page...
Quand Explorer pour Windows apprendra à honorer les sélecteurs avancés de CSS, le codage du même exemple "Bonjour" aura la forme encore plus simple :
<p>Bonjour</p>
Le résultat à l'écran sera identique car tout se jouera dans la feuille de style.
Outre l'avantage "amaigrissant" pour le poids des pages Web, le CSS est un outil de mise en page beaucoup plus puissant que ne l'étaient les balises et les attributs des balises HTML. Il simplifie également les modifications de la mise en page des sites.
Avant le CSS, pour modifier la couleur d'un "bonjour", il fallait modifier et télécharger toutes les pages du site qui le contenaient. Grâce au CSS, on ne modifie que la description correspondante dans un seul fichier, et les modifications se répercutent sur l'ensemble des pages.
Table layout, une autre casserole du Web
Il n'est pas possible de parler de la séparation de contenu de la mise en forme sans aborder le sujet de "table layout" : de la mise en page à l'aide de tableaux HTML. Un vrai monstre.
Il s'agit de l'utilisation "détournée" de la balise <table> et de ses <tr> et <td> rien que pour disposer les éléments d'une page aux endroits voulus de l'écran. Avant l'avènement du CSS, cette pratique permettait de parer à l'absence de technologie Web dédiée à la mise en page. On en est arrivé à pondre des pages monstres qui imbriquent des dizaines de tables les unes dans les autres dans l'unique but de servir la présentation visuelle.
Cette utilisation "détournée" des tableaux HTML n'est plus justifiée depuis que le CSS existe. A quelques rares exceptions près, la balise <table> devrait donc retrouver sa vocation d'origine : véhiculer des données dites "tabulaires", comme par exemple une grille des prix.
Les pages conçues en "table layout" posent d'énormes problèmes d'accessibilité aux navigateurs alternatifs. Elles pêchent également du côté structure logique car le contenu enfermé dans un "table layout" peut avoir un sens à l'écran mais le perd le plus souvent pendant la lecture "ligne par ligne" (je développe ce sujet dans l'article "Linéarisation du contenu").
Les pages en "table layout" sont encore majoritaires sur le Web, surtout en Europe qui, de ce point de vue, accuse un sérieux retard par rapport au Web américain où l'accessibilité est devenu un enjeu stratégique et fait aussi l'objet de réglementations officielles.
Les pages en "table layout" sont toujours plus lourdes que les pages en "CSS layout". Elles prennent plus de temps à charger. En effet, leur poids en Ko (kilo-octets) mis à part, les navigateurs ont besoin de calculer la valeur de chaque cellule (<td>) de chaque tableau imbriqué avant afficher le résultat à l'écran.
Avantage de la séparation de contenu et de mise en page
La séparation de contenu et de mise en page n'apporte que des avantages :
- elle rend les pages Web accessibles aux divers dispositifs de navigation,
- elle les allège du poids superflu et de l'attirail d'imagettes transparentes associées au "table layout",
- le contenu devient intelligible en lecture "ligne par ligne",
- les pages gagnent en clarté structurelle ce qui facilite leur référencement,
- il y a moins de travail pour effectuer des modifications et/ou des mises à jour
- il est possible de changer l'apparence d'un site entier en modifiant une seule feuille de style