J’ai écrit ce white-paper, à destination des ingénieurs de ma société, sur les standards HTML, assez méconnus des personnes qui codent des pages web (utilisateurs lambda de Frontpage, webmasters, ingénieurs, etc.), pour démontrer l’utilité des standards et le nouvel essor que prend le web depuis quelques années… Mieux vaut connaitre un minimum le HTML pour savoir de quoi je parle ci-dessous. 
HTML et standards : écrire une application web accessible, rapide et maintenable
Pré-requis : notions HTML, CSS
Ecrire une page web est une tâche relativement aisée, pour peu que l’on utilise un éditeur WYSIWYG et / ou que l’on a la connaissance du langage HTML.
Cependant, écrire une page web (à utilisation d’internet ou d’un intranet) valide et standard est déjà un peu plus complexe.
En effet, il y a des normes qui sont définies par le World Wide Web Consortium (W3C), organisme international qui régit les nouveaux standards du web au moyen de spécifications. C’est ainsi que l’on est passé successivement du HTML 2, 3, 4 au XHTML 1.0 transitionnel ou strict : autant de déclinaisons du langage HTML au cours de ces dernières années.
La tendance du langage HTML :
- devenir plus strict (moins de balises acceptées pour une même présentation),
- mais également plus « propre » (balises fermées),
- plus découpé (séparation du contenu de la présentation),
- plus accessible (code adapté pour la lecture dans des navigateurs pour personnes déficientes)
- et peut-être même plus social par l’apparition du web 2.0 (qui fera peut-être parti d’un prochain article technique).
Un langage strict et propre
Le XHTML par rapport au HTML a les différences fondamentales suivantes :
- les balises doivent être correctement inclues les unes dans les autres
- tous les éléments doivent être fermés
- toute la déclaration se fait en minuscule
- tous les documents doivent avoir une racine
La différence fondamentale entre le HTML et le XHTML est que ce dernier langage se rapproche beaucoup plus du
langage de déclaration de données très en vogue - j’ai nommé XML.
Pour faire court, le langage XML permet dans un langage informatique simple de décrire des structures de données plus ou moins complexes : du fichier de configuration à la représentation d’objets métier, tout est modélisable.
De ce fait, le langage XML est devenu le standard sur le web et dans beaucoup d’autres domaines. Le langage HTML qui, en prenant du recul, sert en réalité à représenter la structure des données d’une page web, a été adapté en XHTML pour se rapprocher d’un modèle unique de représentation des données.
En passant à la syntaxe XHTML, les pages sont mieux écrites dans le sens où toutes les balises doivent être fermées.
En HTML, il était permis d’écrire
<img src="monimage.jpg" mce_src="monimage.jpg">
au lieu de fermer la balise comme ceci
<img src="monimage.jpg" mce_src="monimage.jpg" />
La différence importante est qu’à l’interprétation par le navigateur web, le premier cas est ambigü car le navigateur ne sait où se termine la balise décrivant l’image. Alors que dans le second cas, on sait que la balise image n’a pas de paramètre supplémentaire. Heureusement (ou pas), les navigateurs sont plutôt tolérants et interprètent selon des règles pré-conçues ces exceptions…
Du point de vue du navigateur, le langage XHTML permet une représentation des données de la page plus précise, sous la forme d’un arbre, et permet de se rapprocher du modèle unique de représentation d’un document : le DOM.
Le DOM est une préconisation du W3C qui a servi à fédérer les technologies de parsing inventées par Netscape (pour Navigator) ou Microsoft (pour Internet Explorer).
Il y a également moins de façons d’écrire la même chose. Par exemple, si nous voulons une image avec une bordure noire, avant on pouvait écrire
<img src="monimage.jpg" mce_src="monimage.jpg" border=1>ou
<img src="monimage.jpg" mce_src="monimage.jpg" border="1">ou
<img src="monimage.jpg" mce_src="monimage.jpg" border="#000000">etc… j’en oublie peut-être…
En XHTML, il n’y a qu’une seule (bonne) façon de faire :
<img src="monimage.jpg" mce_src="monimage.jpg" style="border: 1px solid black" />
ou mieux, plus “sémantique”, plus “web 2.0″ (utilisation d’une class dont le nom a un sens)
<img src="monimage.jpg" mce_src="monimage.jpg" class="logo" />
Un langage plus découpé
L’architecture d’une page web aujourd’hui, en 2007, est à l’image des applications 3 tiers les plus perfectionnées car on y trouve, de la même façon :
- une couche présentation
- une couche données
- une couche logique
Ce modèle à 3 couches est connu sous le nom de MVC (Modèle Vue Contrôleur) bien connu des architectes d’applications web complexes. Il sous-entend qu’une application moderne doit être séparée en 3 “couches logiques” :
- une pour gérer la disposition des informations de la page
- une pour stocker (disons plutôt représenter pour notre cas) les données de la page
- une pour gérer les évènements sur la page
Si on “extrapole” le comportement de la couche persistence des données, on retrouve ce découpage intelligent dans la nouvelle structure des pages web conformes aux standards.
La page web moderne d’aujourd’hui serait découpée :
- en un fichier CSS qui décrit la présentation de la page
- en un fichier HTML qui décrit le contenu de la page (le texte)
- en un fichier JS qui décrit le comportement
Bien entendu, on peut regrouper les 3 fichiers dans le même fichier HTML, mais il est plus intéressant de bien identifier ses composantes.
On retrouve ce même découpage au sein même des balises (!), car dans une application moderne écrite en XHTML, on écrira
<img src="monimage.jpg" mce_src="monimage.jpg" class="logo" onmouseover="agrandirImage()" />Les 3 paramètres correspondant à :
- un paramètre de présentation (class)
- un paramètre indiquant la source de données (src)
- un paramètre de comportement (onmouseover)
Un langage plus axé sur l’accessibilité
Ce découpage permet d’utiliser des styles particuliers pour tous les types de navigateurs (PC, mobiles, etc.) et pour tous les utilisateurs (accessibilité pour les personnes handicapées).
Si on veut écrire désormais notre balise image en prenant en compte ce dernier critère, on écrirait
<img src="monimage.jpg" mce_src="monimage.jpg" class="logo" onmouseover="agrandirImage()" alt="Logo de ma société" />
Le paramètre alt étant désormais une nécessité impérative car il indique le texte de remplacement qui devrait s’afficher si l’image devait ne pas s’afficher (appareils mobiles, navigateurs texte, navigateurs audio pour personnes non-voyantes, etc.).
L’évolution du world wide web étant exponentielle, il devenait de toute façon nécessaire de structurer beaucoup plus sérieusement le fondement même de ses fondations. Il fallait revoir le langage qui décrit tout le web. Les avantages du langage XHTML dans le contexte du web 2.0 sont multiples.
- Une représentation plus intelligente de l’information permet
- une indexation par les moteurs de recherche beaucoup plus efficace,
- un chargement des pages plus rapide
- une répartition des rôles plus efficace (webdesigner, programmeur,
contributeur, etc.)
- Une séparation des couches permet
- de s’affranchir de l’une d’elles sans perdre l’information essentielle -
le contenu lui-même -, - un fonctionnement optimal dans des configurations différentes
- sous-entend une meilleure maintenabilité du code, devenu plus clair
De plus, notons que le web devient à la portée de tous, et prend même depuis peu une dimension sociale grâce à l’apparition des applications web 2.0 à base d’Ajax (technologie javascript / XML qui permet de programmer des applications web plus rapides et conviviales) comme YouTube, Google Docs, Twitter… un prochain article pourra développer ces nouveaux services.
Finalement, quand on évoque le webdesign, on est loin d’imaginer que sous ce terme se cachent les termes du “nouveau web” : web 2.0, XHTML, XML, CSS 2, javascript, recommandations W3C ou accessibilité. Il existe 1001 façons d’écrire la même page web, mais une seule façon d’écrire une
page accessible, standard, rapide, optimisée pour le référencement, et facile à maintenir.
Pour aller plus loin :
Accessibilité
Référence des tags XHTML
Quand vous êtes prêts… testez votre page HTML
Les développeurs Java vont être contents… 
Il y a déjà un petit moment que Google sortait GWT (
Loading ...
Derniers commentaires