Le XHTML

Successeur du HTML, le XHTML est le premier pas à accomplir vers le Web de demain. Une évolution qui est la conséquence de nouvelles attentes, sur les aspects d’accessiblilité, par rapport à la multiplication des supports de lecture et l’évolution des habitudes de programmation de plus en plus basées sur des pages construites dynamiquement. Ce format permet, en outre, d’être à la fois compatible avec les navigateurs d’hier et avec le XML [1], sa rigueur en faisant ainsi un puissant langage de structuration de contenu, laissant le soin de la présentation aux CSS.

Le HTML pose des problèmes pour les pratiques dynamiques, car la structure est très rigide, le contenu est la mise en forme sont mélangés. De plus, le HTML est très tolérant aux erreurs, ce qui rend son traitement automatisé très difficile.

Pour aborder le XHTML, ceux qui connaissent le HTML des années 90 devront surtout apprendre à oublier les balises obsolètes et à respecter l’usage normalisé de celles qui avaient été détournées de leur fonction.

En revanche, ceux qui feront avec lui leurs premières armes sur le Web apprécieront sa simplicité et sa sobriété, qui le rendent beaucoup plus facile à maîtriser que son prédécesseur.

Enfin, le dernier gros avantage du formatage des données est d’avoir des pages beaucoup plus légères et un traitement amélioré par les navigateurs, cela donne au final une navigation plus confortable pour les internautes et une maintenance facilité pour les webmasters

Les CSS

Un petit peu d’historique pour commencer, en 1996, le W3C publie un nouvelle recommandation intitulée Cascading styleSheets (Feuille de style en cascade) et propose ainsi un nouveau concept :la feuille de style.

Les feuilles de style ont été mises au point afin de compenser les manques du langage HTML du point de vue de la présentation et de la mise en page. Déclarer pour chaque balise le style, la police, la couleur, l’alignement devenait un travail énorme et surtout, ralentissait l’interprétation du navigateur, d’où la nécessité d’instaurer une normalisation de ces styles.

Le principe de ces feuilles de style est très simple : « attribuer des caractéristiques de mise en forme à des groupes d’éléments ». c’est-à-dire, concrètement, personnaliser chaque balise HTML d’une façon homogène tout au long de la page sans toucher à cette page ! Par exemple, vous pouvez déclarer une fois, en début de page, qu’un titre aura le style suivant : Arial - vert - italique. Tous les titres adopteront alors ce style sans avoir à spécifier la mise en forme à chaque fois.

Les CSS sont désormais supportées par les navigateurs modernes et sont donc devenus l’outil de présentation des pages Web standards.

Le gain réalisé par l’utilisation de ces CSS est assez important, il permet en effet d’avoir :
  une gestion simplifiée de la présentation d’un site pour toutes les pages, aisément modifiable ;
  un allègement des coûts de développement et de maintenance : il n’est plus nécessaire de mettre en place un système pour repérer le type de navigateur qu’utilise l’internaute et lui servir une page ;
  allègement du code-source des pages Web : une feuille de style n’est chargée qu’une fois par un navigateur, qui l’applique sans délai si nécessaire aux pages visitées par la suite ;
  possibilité de doter une page de feuilles de style spécifiques selon les medias (navigateurs graphiques, lecteurs d’écran...). Les feuilles de style print permettent une impression immédiate d’une page depuis le navigateur, et dispensent d’avoir à créer une version imprimable du document HTML ;
  possibilité de doter une page de présentations alternatives au choix de l’utilisateur ;
  création de layout flexibles, qui s’adaptent aux différentes résolutions d’écran ;
  meilleure accessibilité des pages Web par la disparition des tableaux détournés à des fins de présentation.

En résumé

Avec le XHTML et le CSS, on accède à une séparation du texte et de la mise en forme, permettant d’avoir un document XHTML de base et différentes feuilles de style.

La première application est de pouvoir proposer une feuille de style classique et une autre à grands caractères et contraste élevé pour les personnes ayant des difficultés visuelles. Par exemple, le site de Openweb propose différents styles (classique et fond noir avec gros caractères entre autres).

Une seconde application est la modification très facile du design d’un site complet. Le site css Zen Garden en est un excellent exemple. Vous pouvez changer toute la mise en page. Plusieurs sont proposées dans la catégories "select a design".

De plus, le XHTML est très structuré et facilite le traitement automatisé des pages Web, par exemple par un logiciel chargé de récuperer les dernières nouvelles sur un site.

Pour finir, le XHTML ne tolère pas les balises propriétaires et assure donc un rendu correct des pages pour tous les utilisateurs, indépendamment de la plateforme et du navigateur de l’utilisateur.

Où apprendre ?

OpenWeb propose un cours XHTML d’une heure clair et partant du principe que vous ne connaissez pas le HTML. Pour ceux qui connaissent le HTML, un cours de migration HTML vers XHTML est proposé.

Sur le même site, vous trouverez une série de cours sur le CSS.