Valid XHTML 1.0 Strict
Apprendre le XHTML

Apprendre le Xhtml

XHTML signifie eXtensible HyperText Markup Language, c'est à dire langage de balises hypertexte extensible.


Le XHTML est une récriture du HTML dont l'objectif est de permettre une transition vers le XML. HTML étant le langage universel créé en 1998 par le W3C pour créer des pages web facilement et XML, quant à lui, une manière "universelle" d'écrire les informations. On peut dire que le HTML est l'ancien langage permettant d'écrire une page web et XML le futur langage. Pour info, ce site est développé en XHTML 1.0 Strict.

Les 5 règles de syntaxe XHTML

  • Toute balise ouvrante doit obligatoirement être fermée.
    Juste : <span>xhtml</span>
    Faux : <span>xhtml<span>
  • Les balises et les attributs doivent être écrits en minuscule.
    Juste : <a href="http://xhtml.le-developpeur-web.com" title="xhtml">XHTML</a>
    Faux : <A href="http://xhtml.le-developpeur-web.com" TITLE="xhtml">XHTML</a>
  • Les valeurs des attributs doivent être entre guillemet ou apostrophe.
    Juste : <span id="monSpan" class='spanXhtml'>xhtml</span>
    Faux : <span id=monSpan class=spanXhtml>xhtml</span>
  • Chaque attribut doit avoir une valeur.
    Juste : <input type="checkbox" cheched="checked" />
    Faux : <input type="checkbox" checked />
  • Chaque élément doit être imbriqué correctement.
    Juste : <p>j'aime le <strong>xhtml</strong></p>
    Faux : <p>j'aime le <strong>xhtml</p></strong>

XHTML et sémantique

La sémantique c'est quoi ? La sémantique, c'est le sens donné à un élément de la page web.


Ici, je ne donne aucun sens :


<div>Chapitre 1 : Le xhtml et la sémantique</div>
<div>Le xhtml doit donner du sens !</div>

Maintenant, il y a un sens :


<h2>Chapitre 1 : Le <abbr>xhtml</abbr> et la sémantique</h2>
<p>Le <abbr>xhtml</abbr> doit donner du sens !</p>

La sémantique pourquoi faire ?


D'abord pour améliorer l'accessibilité : un appareil de synthèse vocal saura ainsi que tel élément est le titre de la page, celui-la le sous titre n°1 de la page et ce texte le premier paragraphe du sous-titre n°1... il saura aussi que ces 4 lettres sont une abréviation et que ce mot est un mot à définir suivi de sa définition....


Ensuite pour améliorer son référencement : un moteur de recherche n'est pas intelligent (enfin pas encore!) et ne sait pas ce que tel ou tel élément de la page représente. Entouré un élément par une balise spécifique indique au robot ce que représente cet élément. Le moteur ne pourra que mieux comprendre la structure et le sens de vos page web.

XHTML et accessibilité

Le XHTML permet d'améliorer l'accessibilité des sites internet. L'accessibilité c'est quoi ? L'accessibilité, c'est la capacité à accéder un site Internet via n'importe quel logiciel capable de naviguer sur un site web : les navigateurs web traditionnels (firefox, internet explorer, safari...) mais aussi les appareils de synthèse vocale utilisées par les handicapés, les navigateurs des téléphones mobils (pour bientôt), le navigateur de mon frigidaire (qui me proposera d'acheter des oeufs en ligne quand je serai à cours) ou le navigateur intégré au tableau de bord de ma voiture (qui peut-être dans un futur proche me proposera une reservation en ligne d'une chambre de l'hotel le plus proche)...


L'utilité du XHTML, c'est de réaliser un site et un site seulement, de manière à ne pas décliner autant de sites qu'il existe de logiciels capables de naviguer sur un site internet.


NB : Le XHTML ne résout pas tous les problèmes d'accessibilité rencontrés par les handicapés. La logique de positionnement des éléments d'une page web les uns par rapport aux autres et de nombreux autres critères ergonomiques sont tout aussi importants.

XHTML 1.0 et XHTML 1.1

Pour le moment, ça ne vaut pas le coup de coder un XHTML 1.1 !
Le site du W3C est d'ailleurs en XHTML 1.0.


Passer de XHTML 1.0 vers XHTML 1.1, c'est faire un pas de plus vers le XML, en particulier en ce qui concerne la déclaration de contenu. Mais attention, il ne suffit pas de choisir le bon doctype pour qu'un document XHTML 1.1 soit valide.


C'est quoi la différence entre XHTML 1.0 et XHTML 1.1 ?


  • XHTML 1.0 accepte d'être interpreté comme un document HTML.
    C'est pour cette raison que son type mime est "text/html".
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  • XHTML 1.1 n'accepte pas d'être interpreté comme un document HTML.
    Pour cette raison, son type mime doit être "application/xhtml + xml".
    <meta http-equiv="Content-type" content="application/xhtml + xml ; charset=ISO-8859-1" />

Actuellement, la plupart des serveurs sont configurés pour envoyé "text/html" lorsqu'il s'agit de fichiers ".php", ".html", ".asp"... Il faut donc modifier les données envoyées par le serveur, soit directement sur le serveur, soit via un langage serveur.

Exemple avec php : header('Content-type:application/xhtml+xml');

Donc, les documents XHTML 1.1 servis en "text/html" ne sont pas valides ! Même si le W3C vous le validera quand même ! De plus, le type mime "application/xhtml + xml" n'est pas supporté par tout les navigateurs.

Ne pas confondre XHTML et CSS !

Il ne faut pas confondre XHTML et CSS. CSS sont des styles qui définissent la présentation de la page alors que XHTML défini la structure de la page. Structure et présentation sont différents mais complémentaire. Dans le code suivant <abbr>XHTML</abbr>, la balise <abbr> definie la structure de la page et sa sémantique en spécifiant que XHTML est une abréviation. Grâce aux styles CSS, on peut appliquer une présentation particulière en affichant en gras tous les mots compris entre la balises <abbr> et </abbr>. Mais ceci est une autre histoire et ce site ne traite pas des styles CSS.

2016 © Fabien Branchut