Avant de penser à l’aspect esthétique d’une page Web, il convient de réfléchir à la façon dont va s’organiser sémantiquement le code HTML (ou XHTML) de cette page. Le but de cette démarche est que la page forme un « couple idéal » avec la feuille de style CSS qui va y être attachée.

Une structuration sémantique

Un grand nombre de concepteurs Web ont appris leur métier à une époque où la priorité était donnée à l’aspect des pages, à leur design, à leur look. Il fallait alors réfléchir aux images, couleurs, graphismes qui permettraient de réaliser ce look. En général, on utilisait un logiciel graphique (Photoshop par exemple) pour dessiner l’aspect esthétique de la page. Ensuite, on s’arrangeait pour que le code HTML traduise le mieux possible ce qu’on avait dessiné sous Photoshop. Mais cette époque est révolue, par exemple parce que les différents systèmes de navigation (navigateurs, téléphones portables, PDA, etc.) ne peuvent pas afficher de telles pages qui ne sont conformes à aucun standard.

Pour qu’une page Web puisse être associée à une feuille de style CSS et soit conforme aux standards, il faut absolument oublier cette façon de faire. La priorité ne doit plus être donnée à l’aspect esthétique mais à la façon dont le code HTML est structurée. C’est ici qu’intervient la sémantique. En gros, la sémantique s’occupe du sens des termes linguistiques. Pour ce qui nous concerne, en tant que concepteur de pages Web, cela veut dire que le code HTML doit être organisé en fonction de son sens.

Je sens que vous allez me demander un exemple. En voici un : un menu de navigation ce n’est finalement qu’une liste d’options. Alors la balise HTML la mieux adaptée au codage d’un menu de navigation c’est la balise qui crée une liste, par exemple une liste <ul>.

Une page structurée sémantiquement implique aussi que son contenu textuel soit organisé en différents modules, chacun regroupant les idées apparentées.

Lorsqu’une page est correctement structurée, il est alors facile de lui appliquer une feuille de style et de lui donner l’esthétique que l’on veut : le menu horizontal en haut, vertical à gauche ou à droite, etc. Pas de limite à l’imagination en la matière…

Alors comment on fait ?

Le mot-clé est « structuration sémantique » : des balises correspondant au contenu qu’elles définissent et des modules thématiques de contenu textuel. Si on réfléchit à la façon dont doit s’organiser la page que l’on est en train de créer, voici, par exemple, le type de structure que l’on pourrait définir :

  1. Barre horizontale comprenant le nom de la société, son logo, etc.
  2. Menu principal de navigation.
  3. Sous-menu de navigation.
  4. Contenu textuel et graphique de la page.
  5. Formulaire de feedback pour les internautes.
  6. Barre horizontale contenant le pied de page, un menu textuel, etc.

Chacun de ces thèmes peut être placé dans une balise <div> car celle-ci permet justement d’organiser la structure de la page. Et chacune de ces balises <div> peut se voir attribuer un attribut « id » spécifique. Par exemple :

  • <div id="entete"></div>
  • <div id="menuPrincipal"></div>
  • <div id="sousMenu"></div>
  • <div id="texte"></div></code>
  • <div id="feedback"></div>
  • <div id="basDePage"></div>

Nous avons donc défini une structure et n’avons jamais réfléchi en terme d’esthétique. Cette façon de faire est donc très différente de la façon « traditionnelle ». Nous avons organisé l’information de manière sémantique quant à son contenu et il ne reste plus qu’à entrer le contenu textuel et graphique entre les balises <div>.

Chaque balise HTML doit être choisie avec rigueur, non pas parce qu’elle implique un certain aspect sur la page mais pour son sémantisme propre. Ainsi, inutile d’utiliser la balise <blockquote> pour indenter un paragraphe si ce paragraphe n’est pas une citation. Il faut indenter un paragraphe via la feuille de style CSS (puisque l’indentation est un problème d’aspect, d’esthétique). Par contre, si l’on fait une citation (un extrait d’un roman par exemple), alors il faut utiliser la balise <blockquote> car c’est son sens (en anglais le terme « block quote » peut se traduire par « module de citation »). On code alors sémantiquement.

Chacun de ces modules (les <div>) peut alors être placé où l’on veut dans la page et avoir les couleurs, les polices, les espacements, etc. que l’on veut grâce à la feuille de style CSS. Rien n’empêche, par exemple, de mettre le menu principal de navigation en haut horizontalement ou bien de le mettre à droite verticalement ou encore à gauche. C’est maintenant qu’il faut se soucier des aspects esthétiques et surtout laisser tout cela à la charge de la feuille de style.