Pourquoi séparer la présentation du contenu? | W3Québec
Contribution collective, septembre 2005
Définition des concepts
La division qu’opère le W3C n’est pas entre présentation et contenu, mais entre contenu, structure et présentation. Il s’agit donc d’une division tripartite et non bipartite.
Le tout à diviser est un document Web, lequel peut être une simple page HTML comme un ensemble de pages liées entre elles.
Contenu = tout ce qu’on porte à la connaissance de l’utilisateur via le langage naturel, les images, les sons et les animations. Exclut donc tout ce qui s’adresse aux engins de recherche, au navigateur ou au serveur, comme les éléments HTML, les scripts, les instructions de style et les métadonnées.
Structure = organisation logique du contenu grâce à des éléments comme ,
,
, , , etc. Les ancres et les liens, grâce auxquels les parties sont interreliées, font partie de la structure du document, mais pas les liens qui pointent vers un autre site.
Présentation = manière dont les contenus se manifestent pour l’utilisateur via un périphérique de sortie, comme un écran, une imprimante, un navigateur vocal, une plage braille, etc.
Origine de la séparation
À l’origine, le HTML a été conçu à des fins structurelles. Ce n’est que tardivement et pour permettre de plus belles mises en page, des éléments comme , ,
Parce que :
- le document Web retrouve sa vraie richesse structurelle et sémantique;
- le contenu peut être réutilisé facilement dans d’autres contextes;
- le design d’un site devient comme un vêtement que l’on peut facilement changer;
- les refontes signifient souvent un simple changement de feuilles de style, sans modifications à apporter aux pages elles-mêmes;
- les agents utilisateurs incapables d’interpréter la mise en page complexe peuvent tout de même interpréter le contenu sans le moindre heurt;
- le code étant plus léger, les fichiers sont considérablement allégés, ce qui permet des téléchargements beaucoup plus rapides (notamment pour ceux qui ont une connexion à faible débit) et des économies substantielles en bande passante (significatif pour les gros sites et ceux très fréquentés);
- le code est plus maniable du fait de n’avoir qu’un seul fichier CSS à modifier pour que les changements se répercutent sur l’ensemble du site (à condition bien sûr d’avoir fait preuve de rigueur avant);
- les documents qui séparent correctement la présentation du contenu sont plus facilement consultables par les personnes qui font usage de modes alternatifs de navigation, comme un navigateur textuel, une synthèse vocale ou une plage braille;
- les documents auront moins de chance d’être obsolètes d’ici la refonte du site, ils resteront parfaitement compatibles avec les technologies du passé (compatibilité descendante) et seront assurés de leur compatibilité avec les technologies à venir (compatibilité ascendante);
- le travail en équipe est facilité et plus efficace (les deux aspects étant nettement séparés – trois, si on ajoute le comportement dynamique –, personne n’empiète sur le terrain de l’autre; à l’un, l’intégration du contenu avec HTML, à l’autre, le design avec CSS, à un tiers, l’éventuelle dynamisation des contenus par PHP, JavaScript, etc.);
- étant mieux codés à la base, les documents ont plus de chance de se démarquer des autres aux « yeux » des robots référenceurs qui ratissent le Web à la recherche de nouveaux contenus à indexer. Ce qui aura un effet sur le positionnement du site, sa visibilité d’ensemble et son taux de fréquentation;
- les économies sont appréciables lors des mises à jour et des refontes.
Pour apporter de l’eau au moulin de la séparation du contenu de la présentation
W3C Working Draft – Document Content, Structure, and Presentation
Conseil : dans Document Content, Structure, and Presentation [WCAG10] [WCAG20], cliquez également sur les mots content et element signalés pour en connaître la définition.
Mots clés
- clarification du code
- allégement de la lecture du code
- modification facile de la présentation ou du contenu
- uniformisation la présentation sur plusieurs pages
- compatibilité ascendante et descendante
- pérennité des documents
- économie de bande passante
- vitesse de téléchargement accrue
- mise à jour et refonte simplifiées