Séparation structure/ présentation/ comportement

Explicitons dans un premier temps ces 3 termes :
La structure d’une page web est l’organisation de son contenu avec des balises HTML ou XHTML telles que des balises de titres, d’ancres et de liens internes au document, ou encore de nouvelles venues avec l’HTML5 comme <nav> ou <section> (voir notre article «Présentation de l’HTML 5»).
La présentation, manière dont les contenus apparaissent à l’utilisateur, se définit grâce aux Cascading Style Sheets (CSS) ou feuilles de style en cascade grâce auxquelles on peut agir sur les couleurs, la taille, le positionnement et bien d’autres choses.

Le comportement concerne toute «animation» de la page déclenchée par une action telle que le survol de la souris, le clic, le chargement de la page. Ce comportement est en théorie codé en Javascript ou en PHP. Vous comprendrez par la suite le pourquoi de ce «en théorie».

Le W3C a introduit à l’époque du XHTML 2.0 la séparation des différentes couches évoquées ci-dessus dans une optique de clarté. En témoigne la suppression des balises HTML <font> (modification des polices de caractères) ou <center> (centrage d’un élément) qui étaient utilisées à des fins de présentation.
Or, en pratique, on observe un mélange des couches. La raison ? XHTML 2.0 n’étant plus d’actualité, la séparation stricte n’est plus un objectif.
Tout d’abord, les CSS et Javascript offre la possibilité d’associer le code en externe ou de l’inclure en interne, c’est-à-dire dans l’en-tête du document respectivement entouré de balises <style> et <script> ou dans les balises structurant le contenu. Cependant, les bonnes pratiques du web font que cela se fait de moins en moins.
Ensuite, un autre exemple de mélange des couches est le fait que les CSS peuvent inclure du comportement avec la pseudo-classe :hover (changement de présentation au survol) et de la structure avec :before et :after (ajout de contenu avant ou après un élément). HTML inclut de la présentation et du comportement avec les types d’<input> dans les formulaires (cases à cocher, chargement de fichiers, boutons d’envoi) et certains plugins jQuery (bibliothèque de fonctions Javascript) apportent de la structure et de la présentation à la page web.
Pour reprendre et finir sur l’exemple cité dans l’article «La séparation structure/présentation/comportement est morte» (traduction de celui de Kevin Dees), on peut gérer un effet visuel au survol d’un lien avec la pseudo-classe CSS :hover et un comportement plus avancé comme un changement d’opacité en Javascript. Le fait que cet effet soit géré dans deux couches différentes s’appelle la divergence.

Même si la séparation stricte n’est pas une réalité, le fait de bien distinguer structure, présentation et comportement amène un certain nombre d’avantages que l’on peut présenter sous forme de liste:

• Meilleure accessibilité, notamment pour les modes de navigations alternatifs comme les lecteurs d’écran car ils ne sont plus parasités par des éléments qui n’ont rien à voir avec le contenu de la page.
• Parallèlement, meilleure indexation par les moteurs de recherche pour la même raison qu’au point précédent.
• Nettoyage et allègement des pages qui réduit par la même leur temps de chargement.
• Simplification de la maintenance et d’éventuelles refontes.

Pour conclure, cette séparation entre structure, présentation et comportement n’est pas complètement nette comme l’aurait voulu le W3C, il existe une zone de divergence, de compromis. Même si elle n’est plus considérée comme un objectif, on observe toujours une séparation relative des couches assez avantageuse.

Ressources complémentaires, avis contraires sur la séparation structure/présentation/comportement:
«La séparation de la structure, de la présentation, et du comportement n’est pas morte»
«The separation of structure, presentation and behavior is dead»