Avant de penser à l’aspect d’une page Web, il faut penser à sa structure (pas la charrue avant les boeufs). Ainsi, votre code HTML ou XHTML sera prêt à recevoir le formatage de la feuille de style CSS. Dans cette optique, il faut se débarrasser de toutes les balises HTML qui visent à modifier la présentation de la page et remplacer celles-ci par du code CSS.

La structure

Beaucoup de concepteurs pensent d’abord au « look » d’une page avant de penser à sa structure (si toutefois ils y pensent…). Ils lancent Photoshop ou Fireworks puis dessinent graphiquement l’aspect visuel de la page. Quand ils ont fini cette étape, ils s’arrangent pour recréer ce design en HTML.

Pour de bonnes pratiques conformes aux standards du W3C, il faut oublier cette méthode inappropriée et rétablir un ordre logique de conception de la page. Il faut donc penser en premier à la structure du contenu qui viendra s’insérer dans la page.

Il faut noter que, pour une même structure et un même contenu, le look de la page pourra être très différent grâce à la feuille de style CSS. Autrement dit, le fait de penser en premier à la structure du contenu n’influe en rien sur le look de la page. Il s’agit juste de travailler selon un ordre logique et selon les bonnes pratiques.

Pourquoi ces bonnes pratiques ? Parce que si vous créez une page dans Photoshop, il est probable que celle-ci ne fonctionne pas si un internaute veut la voir sur son PDA, son téléphone cellulaire ou son lecteur d’écran, voire sur son navigateur si celui-ci est autre qu’Internet Explorer (environ 20 % des cas actuellement, soit des millions d’utilisateurs).

Comment on fait ?

Il faut considérer que le contenu d’une page se répartit en blocs et que chaque bloc doit avoir une signification homogène. Ce sont des blocs de contenu et chaque bloc a un même objectif du point de vue de la signification. La structure de votre page doit refléter ces différents blocs. Par exemple :

1. Haut de page avec titre et logo
2. Contenu textuel principal
3. Menu de navigation pour tout le site
4. Sous-menu de navigation
5. Formulaire de recherche pour le site
6. Pied de page avec mentions légales

La balise servant à structure le contenu d’une page est <div> et on peut donc écrire :

<div id= »titre »></div>
<div id= »contenu »></div>
<div id= »nav »></div>
<div id= »sousnav »></div>
<div id= »recherche »></div>
<div id= »pied »></div>

Ce code représente la structure de la page et il est organisé sémantiquement (d’après le sens). Une balise <div> peut contenir tout ce qu’on veut, y compris d’autres balises <div>, des titres de paragraphes, des paragraphes, des images, des tableaux, etc. Chaque bloc de contenu peut être placé où l’on veut sur la page avec les couleurs, les bordures, les alignements, etc. que l’on veut. Autre avantage : une page ainsi structurée reste simple et donc facile à maintenir et modifier. Ainsi, les coûts pour le client sont réduits et votre travail gagne en efficacité.

Remplacer les balises HTML par du code CSS

Chaque balise HTML de présentation doit ensuite être remplacée par son équivalent CSS. Par exemple, on pourra simplifier :

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0"

en :

margin: 0;