XHTML - Apprendre le HTML

XHTML (Extensible HyperText Markup Language) est une reformulation de HTML 4.01 datant de l'an 2000, conçue comme une application XML stricte et publiée par le World Wide Web Consortium (W3C). Il partage le même vocabulaire de balises que HTML, mais impose les règles de bonne formation de XML : chaque balise doit être fermée, en minuscules et correctement imbriquée.

Pour les nouveaux projets, préférez HTML5. XHTML 1.0 a été largement supplanté par HTML5, qui conserve la rigueur de la bonne formation comme style polyglot optionnel tout en étant beaucoup plus souple et riche en fonctionnalités. Cette page constitue avant tout un rappel historique sur une norme héritée que vous pouvez encore rencontrer dans des bases de code plus anciennes.

L'objectif initial était de rendre les documents plus stricts et plus prévisibles, afin qu'ils puissent être analysés par n'importe quel processeur XML standard et réutilisés sur un large éventail d'appareils et d'outils. En raison du caractère implacable de ces règles, une seule balise fermante manquante pouvait empêcher l'affichage du document entier lorsqu'il était servi en tant que véritable XML.

Règles de bonne formation

La différence fondamentale entre HTML et XHTML est que XHTML doit être un XML bien formé. Voici les règles, chacune illustrée par un exemple incorrect et un exemple correct.

Structure du document et doctype

Tout document XHTML doit commencer par un <!DOCTYPE> XHTML et contenir les éléments <html>, <head>, <title> et <body>. L'élément <html> doit également déclarer l'espace de noms XML avec l'attribut xmlns.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    Content of the page
  </body>
</html>

Essayez vous-même »

L'attribut xmlns

xmlns="http://www.w3.org/1999/xhtml" est la déclaration d'espace de noms XML. Elle indique à un analyseur XML que les éléments du document appartiennent au vocabulaire XHTML et non à un autre langage XML. Elle est obligatoire sur l'élément racine <html> de tout document XHTML. L'URL est un identifiant, pas un lien que le navigateur va chercher.

Variantes du doctype XHTML

XHTML 1.0 définit trois DOCTYPE, chacun pointant vers un DTD différent. L'exemple ci-dessus utilise Transitional, le choix le plus courant.

Strict — balisage propre et sans présentation. Les éléments et attributs de présentation dépréciés (tels que font ou bgcolor) ne sont pas autorisés ; la mise en forme est laissée à CSS.
Transitional — autorise les fonctionnalités de présentation dépréciées pour la compatibilité avec les anciens contenus.
Frameset — comme Transitional, mais permet les documents <frameset> qui divisent la fenêtre en cadres.

Fermer chaque élément

En HTML, certaines balises fermantes peuvent être omises, mais en XHTML chaque élément doit être fermé. Les éléments vides sans contenu (comme br, hr, img) se ferment eux-mêmes avec une barre oblique finale.

<!-- Wrong (HTML-style, not closed) -->
A break: <br>
An image: <img src="smile.gif" alt="Always smile">

<!-- Right (self-closed for XHTML) -->
A break: <br />
An image: <img src="smile.gif" alt="Always smile" />

Utiliser des noms de balises et d'attributs en minuscules

XML est sensible à la casse, donc <P> et <p> sont des balises différentes. XHTML impose que tous les noms d'éléments et d'attributs soient en minuscules.

<!-- Wrong -->
<BODY>
  <P>Some paragraph</P>
</BODY>

<!-- Right -->
<body>
  <p>Some paragraph</p>
</body>

Mettre entre guillemets toutes les valeurs d'attributs

Toutes les valeurs d'attributs doivent être encadrées de guillemets, même les valeurs numériques.

<!-- Wrong -->
<table width=100%>

<!-- Right -->
<table width="100%">

Imbriquer correctement les éléments

Les balises qui se chevauchent sont interdites ; les éléments internes doivent être fermés avant leur parent externe.

<!-- Wrong (overlapping) -->
<strong><em>This text is bold and italic</strong></em>

<!-- Right (properly nested) -->
<strong><em>This text is bold and italic</em></strong>

Pas de minimisation des attributs

En HTML, les attributs booléens peuvent être utilisés seuls (checked). XHTML interdit ce raccourci : chaque attribut doit avoir une valeur, et pour les booléens, la valeur répète le nom.

<!-- Wrong (minimized) -->
<input type="checkbox" name="flower" value="rose" checked />

<!-- Right -->
<input type="checkbox" name="flower" value="rose" checked="checked" />

Privilégier `id` plutôt que `name`

En XHTML, l'attribut name est déprécié sur les éléments comme les ancres, il est donc recommandé d'utiliser l'attribut id pour identifier les éléments à la place.

Avantages de XHTML

Toutes les balises doivent être fermées et correctement imbriquées, ce qui rend le balisage cohérent et plus facile à lire.
Étant un XML bien formé, les documents pouvaient être traités de manière fiable par des outils XML génériques et transportés vers des environnements spécialisés tels que les lecteurs Braille et d'autres logiciels d'assistance.
Il encourage une séparation nette entre la structure et la présentation, en travaillant en parallèle avec CSS pour la mise en forme.

XHTML vs HTML

Quelques distinctions clés entre les deux :

Norme sous-jacente. HTML est une application de SGML ; XHTML est une application de XML.
Filiation. HTML descend de SGML ; XHTML est dérivé à la fois de XML et de HTML 4.
Historique. HTML est né avec Tim Berners-Lee au début des années 1990 (Wikipedia) ; XHTML 1.0 est devenu une Recommandation W3C en 2000 (Wikipedia).
Analyse syntaxique. HTML utilise un analyseur tolérant aux erreurs ; XHTML servi en tant que XML nécessite un analyseur XML strict qui rejette les documents mal formés.

XHTML vs HTML5

Sensibilité à la casse. XHTML est sensible à la casse ; HTML5 (comme le HTML classique) ne l'est pas.
Doctype. Les doctypes XHTML sont longs et référencent un DTD ; HTML5 utilise le court <!DOCTYPE html>.
Type MIME. HTML5 est servi en text/html ; l'analyse stricte de XHTML nécessite application/xhtml+xml.
Tolérance. HTML5 récupère gracieusement de nombreuses erreurs de balisage, alors que XHTML les rejette.
Statut. HTML5 est la norme moderne pour tous les appareils ; XHTML 1.0 est désormais considéré comme obsolète.

Exercice

Pratique

Quelles sont les caractéristiques de XHTML (Extensible Hypertext Markup Language) ?

XHTML est presque identique à HTML 4.01.Il ne requiert pas de balises de fermeture pour tous les élémentsIl utilise des minuscules pour tous les noms d'éléments et d'attributs HTMLIl exige des valeurs d'attributs uniquesIl applique des règles plus strictes et n'autorise pas les erreurs de codage et de structure permises par le HTML 'classique'