Un petit rappel

En XHTML strict, on fait une séparation radicale entre le fond et le forme, le contenu et le rendu. Le contenu est mis en idée d'un point de vue « sémantique », c'est-à-dire que l'on utilise un code correspondant au sens du texte : titre, paragraphe, citation, etc. Cette acception du qualificatif sémantique est un abus de langage et ne doit pas être confondu avec le web sémantique qui relève lui du domaine de la cognition, de la compréhension du contenu.

La mise en forme, quant à elle, se fait grâce aux feuilles de style qui permettent d'appliquer un rendu visuel, mais pas seulement, à notre contenu textuel ou graphique.

La quête du sens

Mais il arrive que l'on ait besoin de regrouper des éléments à des fins de mise en page. C'est là qu'interviennent les calques ou <div>. Cet élément est à utiliser quand il n'y a rien d'autre à quoi se raccrocher, ce qui est somme toute assez rare. En effet, il existe souvent un conteneur déjà présent.

Deux conteneurs, c'est un de trop

Une des premières raisons de la surabondance de calques vient de la trop grande rapidité avec laquelle on insère cet élément. Il arrive bien souvent qu'un <div> entoure une liste, par exemple. Si vous regardez le code de ce site, vous verrez que nous n'avons pas échappé à la règle. Le manque de temps fait aussi que, bien souvent, on ne retire pas les calques inutiles d'une maquette.

Mais il existe une autre raison à la prolifération des calques : le manque de vocabulaire. J'entends par là que certains tags ne sont pas utilisés et que le designer a plus vite fait de mettre un <div> de classe adresse qu'une <address>. Idem pour les <label> ou <blockquote>.

Faire le ménage

Regardez votre code et posez-vous la question : ce calque est-il bien utile ? Ce calque nommé menu et contenant une liste de liens peut très bien être éliminé en appelant directement la liste menu. Idem pour ce calque de classe citation qui devient une vraie citation avec <blockquote>. Allez, sus aux calques et bon ménage.