Essentiellement pour trois raisons:

1. pour la lisibilité du code et les effets collatéraux qui en découlent
   • facilité de gestion et de maintenance (un code moins brouillon sera plus facile à consulter, donc à étudier, à modifier ou à transmettre à quelqu’un d’autre)
   • possibilité de travailler en équipe plus efficacement (les deux aspects étant nettement séparés – trois, si on ajoute le comportement dynamique –, il sera plus facile de travailler sans empiéter sur le terrain de l’autre; à l’un l’intégration du contenu avec HTML, à l’autre, le design avec CSS, à l’autre enfin, l’éventuelle dynamisation des contenus par PHP, JavaScript, etc.)
2. pour la légèreté du code et les effets collatéraux qui en résultent
   • économies réalisées sur la bande passante (significatif pour les gros sites seulement)
   • rapidité d’affichage des contenus à l’écran (ce qui se traduit en gain d’accessibilité pour ceux qui ont une connexion à faible débit)
3. pour la maniabilité du code qui résulte 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)

Le reste, Page Rank, accessiblité, pérennité des contenus et tout le tralala, me semble davantage redevable aux bonnes pratiques qu’au principe de séparation contenu/présentation/comportement lui-même.

• Clarifier le code ou alléger la lecture du code
• Faciliter la modification de la présentation ou du contenu
• Uniformiser la présentation sur plusieurs pages

Cela permet aussi d’apporter du sens à ce que l’on écrit. Par exemple, la balise

signifie que le texte qui se trouve entre ces balises représente un paragraphe. Peut importe si je le colore en rouge et qu’il soit en gras ou en italique dans ma feuille de présentation. Cela s’appelle la sémantique d’un texte. A terme, et si j’ai bien tout compris, cela permettra de se faire comprendre des machines ou le contraire!

Note à propos de ce paragraphe:

Ce n’est pas la séparation de la présentation du contenu qui apporte du sens, c’est l’utilisation des bonnes balises selon le contexte. Par exemple, le code dénué d’élément de présentation

M. Smith

avec la règle CSS #signature { text-align:right; color:red; background:white; } n’a pas plus de sens que le code

M. Smith

. Et

Item 1

Item 2

avec p{display:list-item;color:red;font-weight:bold;} a beaucoup moins de sens que

• Item 1
• Item 2

si on veut représenter une liste d’élément.

Il y a des effets collatéraux à cela. En séparant de cette façon, la page devient plus accessible (elle est visible pour les handicapés, les petits écrans comme ceux des téléphones portables… Un autre effet bénéfique est celui de la taille de la page qui devient beaucoup plus légère. Cela peut s’avérer fort utile pour les gens ne disposant pas de haut débit par exemple. Enfin, le fait de séparer la présentation du contenu et donc de respecter des « standards » de programmation permet de s’affranchir de l’optimisation pour tel ou tel navigateur à la condition bien entendu qu’il respecte ces standards 😉

Encore une note à propos de ce paragraphe:

Je ne crois pas qu’une page deviennent plus accessible parce qu’il y a moins de balise dans une page. Seule la diminution de la taille du code peut accélérer le téléchargement et le chargement de la page et donc permettre à des agents utilisateurs à mémoire limitée de consulter (plus rapidement) la page. De plus, la séparation du contenu et de la présentation demeure une bonne pratique et n’a pas de lien avec le respect des standards à moins que le standard en question ne permette pas l’utilisation d’éléments de présentation comme XHTML 1.1. L’optimisation pour un navigateur spécifique, quant à elle, repose habituellement sur l’utilisation d’éléments propriétaires. On peut en effet, optimiser un site pour un navigateur en séparant la présentation du contenu (par exemple, l’utilisation des propriétés CSS propres à certains navigateurs comme -moz-border-radius ou scrollbar-…-color).

Résumé

Séparer la présentation du contenu :

• entraîne une plus grande clarté du code
• facilite la gestion et la maintenance du site
• fait baisser les coûts de production
• assure la pérennité des documents
• garantit une compatibilité descendante et ascendante
• laisse présager un meilleur positionnement
• offre une accessibilité de base appréciable
• allège le poids des documents
• accroît la vitesse de chargement des pages
• permet d’économiser sur la bande passante
• facilite le travail de mise à jour et de refonte
• fait baisser les coûts d’entretien

Clarification des notions

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. Or celui-ci peut être une page HTML seule, aussi bien qu’un ensemble de pages reliées entre elles.

Le contenu d’un document fait référence à ce qu’on veut porter à la connaissance de l’utilisateur via le langage naturel, les images, les sons et les animations qu’il contient. (Ce qui exclut donc tout ce qui s’adresse aux engins de recherche, au navigateur ou au serveur, tels les éléments HTML, les scripts, les instructions de style et les métadonnées.)

La structure du même document correspond à l’organisation logique de son contenu grâce à des éléments comme ,

,

, , , etc. Ajoutons que les ancres et les liens, au moyen desquels les parties sont interreliées font partie de la structure du document, mais pas les liens qui pointent vers un autre site.

Quant à la présentation du document, elle correspond à la manière dont ses contenus se manifestent aux sens externes de l’utilisateur via un périphérique de sortie tel qu’un écran, une imprimante, un navigateur vocal, une plage braille, etc.

Par exemple, supposons une liste à puces. Le contenu correspondra aux parties de l’énumération. Ainsi : + pomme ;, + fraise ; et + banane ;. La structure sera définie par le jeu de balises utilisé, c’est-à-dire

,
• ,

et

. Quant à la présentation, elle correspondra à l’apparence finale de cette liste à l’écran ou à l’imprimante. Les puces, par exemple, pourront être rondes ou carrées, les caractères plus ou moins gros, de telle ou telle couleur, etc.

Nature de cette séparation

Le HTML a originellement été conçu à des fins structurelles. Ce n’est que tardivement et pour permettre de plus belles mises en page, qu’on a vu apparaître en son sein des éléments comme , ,

  
    
      ...
    
  
    

  ul  {background-color: yellow; list-style-type: square;}
  li  {color: green; line-height: 150%;}