Débuter avec xhtml

Installation ou configuration

Relation XHTML avec HTML

XHTML est simplement la version sérialisée de HTML. XHTML était à l’origine destiné à nettoyer le balisage HTML afin d’améliorer la prise en charge des normes. Malheureusement, le travail du W3C sur XHTML 2.0 n’était pas intuitif et s’éloignait de la direction que prenait l’industrie dans son ensemble avec HTML5. XHTML5 n’est pas une norme bien que vous puissiez utiliser XHTML5 (XML sérialisé HTML5) avec des modifications mineures. Des exemples sont fournis ci-dessous pour faciliter l’adoption de XHTML5 et clarifier les ambiguïtés dans la norme HTML5 où XML n’est pas pris en considération.

Avantages XHTML

Étant donné que XHTML utilise l’analyseur XML d’un navigateur, il est nettement (mais pas absolument) moins sujet aux erreurs de programmation courantes. Si un développeur charge une application XHTML avec du XML malformé, la plupart des moteurs de rendu de navigateur rendront jusqu’à le XML malformé tandis que le moteur de rendu Gecko (utilisé dans Firefox) affichera une page jaune. Dans tous les cas, un message d’erreur s’affichera avec les numéros de ligne et de colonne où la première erreur d’analyse XML rencontrée a été rencontrée. De nombreux développeurs ont commis des erreurs simples, telles que manquer une citation dans un attribut HTML, les laissant passer des jours à essayer de déterminer pourquoi un ou deux navigateurs n’affichent pas la page HTML comme prévu. L’utilisation de XHTML peut réduire considérablement le temps de développement par rapport à HTML. XHTML peut avoir un renforcement positif sur l’apprentissage du code HTML valide pour les personnes apprenant le développement Web car il ne permet pas à l’application XHTML de s’afficher intégralement avec du code mal formé et en donnant un message d’erreur explicite que les nouveaux développeurs peuvent rechercher en ligne pour travailler solutions. Étant donné que XHTML est un sous-ensemble de XML, il a donc une très grande compatibilité avec les logiciels qui fonctionnent avec XML dans un très large éventail d’utilisations industrielles, commerciales et résidentielles. Enfin, en raison de ses exigences strictes, le code XHTML de travail est automatiquement compatible avec HTML et XML (sous réserve de l’absence de plusieurs mêmes valeurs d’attribut id) tandis que HTML n’est * pas * intrinsèquement compatible avec d’autres corps de HTML et XML car il n’est pas immédiatement évident que le code HTML peut être malformé.

** Inconvénients XHTML **

En raison des règles beaucoup plus strictes de l’analyseur XML, XHTML n’est pas aussi facile, au départ, pour les développeurs moins expérimentés. XHTML n’est pas souvent pris en considération par divers groupes, contient une ambiguïté en ce qui concerne les parties mal écrites de la norme HTML5 et il n’y a pas de validateur explicite qui déclare la prise en charge de XHTML5. XHTML est moins compatible avec les parties “plus paresseuses” de JavaScript telles que innerHTML qui ne sérialise pas correctement les nouvelles parties du DOM, mais c’est plus un avantage pour les développeurs dédiés à l’apprentissage de XHTML car il nécessite un code plus strict et plus interchangeable.

Utilisation de XHTML

XHTML est la combinaison de HTML et de l’utilisation de l’analyseur XML qui est une version beaucoup plus stricte de l’analyseur HTML ; tous les navigateurs modernes ont des analyseurs HTML pour les analyseurs HTML et XML pour XML (et par la suite XHTML). XHTML ne nécessite pas l’installation d’un logiciel (au-delà de l’utilisation d’un navigateur moderne) cependant une application (X)HTML n’est XHTML que lorsqu’elle est correctement servie au navigateur avec un en-tête envoyé par le serveur déclarant application/xhtml+xml type mime ; vous pouvez vérifier si votre application XHTML a effectivement été servie en consultant le type de média/mime/type dans le panneau des demandes réseau des outils de développement Web de votre navigateur. Une page servie en tant que text/html n’est pas XHTML et sera plutôt analysée par l’analyseur HTML du navigateur.

Chargé depuis un serveur

Lors du chargement d’un analyseur XHTML à partir du serveur, un en-tête doit être défini, l’utilisation d’un élément meta ne sert à rien. En exemple en combinaison avec PHP :

<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 // Client header isset` and explicitly declares XHTML parser support.
 header('Content-Type: application/xhtml+xml; charset=UTF-8');
 echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
 echo '<!DOCTYPE html>'."\n";
 echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'."\n";
}
else
{
 //Some browsers do not declare support, IE9 shamelessly uses `*/*` in example.
 echo '<!DOCTYPE html>'."\n";
 echo '<html>'."\n";
}
?>

Chargé à partir d’un fichier

Si vous effectuez des tests sans charger une page à partir d’un chemin de serveur (par exemple, localhost, 127.0.0.1, 192.168.xxx.yyy, etc.), la seule façon de faire en sorte qu’un navigateur charge une application XHTML et utilise l’analyseur XML est de donner le déposer une extension .xhtml ; exemple.xhtml.


** Prise en charge du navigateur d’analyseur XHTML / XML **

Les navigateurs prenant en charge XHTML via des analyseurs XML incluent Internet Explorer 9+ (la prise en charge de l’analyseur XML dans les anciennes versions prend en charge de manière très compliquée application/xml), Mozilla Suite 0.8+ (toutes les versions de Firefox), Opera 7+ et les premières versions de KHTML (Konqueror et donc toutes les versions de Safari et par extension ultérieure Chromium/Chrome).

Exemple complet XHTML et JavaScript

Ce qui suit est un exemple complet d’utilisation de XHTML avec JavaScript servi par PHP en tant que fichier unique.

<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 // Client header isset` and explicitly declares XHTML parser support.
 header('Content-Type: application/xhtml+xml; charset=UTF-8');
 echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
 echo '<!DOCTYPE html>'."\n";
 echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'."\n";
}
else
{
 //Some browsers do not declare support, IE9 shamelessly uses `*/*` in example.
 echo '<!DOCTYPE html>'."\n";
 echo '<html>'."\n";
}
?>
<head>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
</style>
<script type="application/javascript">
//<![CDATA[
window.onload = function(event)
{
 alert('This JavaScript alert will load once the page has loaded.');
}
//]]>
</script>
</head>

<body>

<h1><span>XHTML and JavaScript Simple Demonstration</span></h1>

</body>
</html>

Ajout de XML à une application XHTML et récupération de XML à partir d’une application XHTML

En utilisant XHTML, vous devez éviter les méthodes telles que document.write et innerHTML car elles traitent XML comme du texte et ne sérialisent pas correctement le code ; un attribut id en HTML est essentiellement vidé dans le DOM et l’attribut id n’est pas sérialisé, ce qui signifie que lorsque vous essayez de vous y référer avec quelque chose comme document.getElementById('example') le navigateur va pas “voir” l’id. Les exemples suivants obtiennent “obtenir” le code XHTML de et “définir” le code XHTML vers l’application XHTML.

Ajout de XHTML à et récupération de XML du DOM

<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 // Client header isset` and explicitly declares XHTML parser support.
 header('Content-Type: application/xhtml+xml; charset=UTF-8');
 echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
 echo '<!DOCTYPE html>'."\n";
 echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'."\n";
}
else
{
 //Some browsers do not declare support, IE9 shamelessly uses `*/*` in example.
 echo '<!DOCTYPE html>'."\n";
 echo '<html>'."\n";
}
?>
<head>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
</style>
<script type="application/javascript">
//<![CDATA[
function xml_get(target)
{
 return new XMLSerializer().serializeToString(target)
}

function xml_set(xml,position,target)
{
 if (typeof target=='string' && document.getElementById(target)) {target = document.getElementById(target);}

 if (!target) {alert('Error: target element was not found in the DOM.');}
 else if (position=='after')
 {
  if (target.nextSibling && target.nextSibling!='[object Text]') {target.insertBefore(xml.getElementsByTagName('*')[0],target.nextSibling);}
  else {target.parentNode.appendChild(xml.getElementsByTagName('*')[0]);}
 }
 else if (position=='before') {target.parentNode.insertBefore(document.importNode(xml.getElementsByTagName('*')[0],true),target);}
 else if (position=='inside') {target.appendChild(document.importNode(xml.getElementsByTagName('*')[0],true));}
 else if (position=='replace') {target.parentNode.replaceChild(document.importNode(xml.getElementsByTagName('*')[0],true),target);}
 else {alert('Error: unknown position to import data to: '+position+'.');}
}

window.onload = function(event)
{
 var xml_after = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>after</em> the h1[0] element!</p>','application/xml');
 var xml_before = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>before</em> the h1[0] element!</p>','application/xml');
 var xml_inside = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>inside</em> inside the element with the id <code>example</code>!</p>','application/xml');
 var xml_replace = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>replace</em> example!</p>','application/xml');
 xml_set(xml_after,'after',document.getElementsByTagName('h1')[0]);
 xml_set(xml_before,'before',document.getElementsByTagName('h1')[0]);
 xml_set(xml_inside,'inside','example');
 xml_set(xml_replace,'replace','example_replace');

 alert(xml_get(document));
}
//]]>
</script>
</head>

<body>

<h1><span>XHTML and JavaScript Simple Demonstration</span></h1>
<div id="example"></div>
<div id="example_replace"></div>

</body>
</html>

XHTML5 et attributs booléens

HTML5 définit certains attributs HTML comme booléens ; un booléen ne peut être que “vrai” ou “faux”. La spécification indique simplement que la présence d’un attribut booléen implique que l’attribut est défini sur vrai. Dans l’exemple, l’utilisation d’un attribut disabled dans l’exemple suivant désactive l’élément d’entrée du bouton :

<input disabled type="button" value="HTML Button">

XML, et donc XHTML par extension, doit avoir un attribut et une valeur valides. Étant donné que HTML5 n’est pas écrit de manière à clarifier de telles choses (l’ambiguïté dans les normes passées a conduit à des implémentations de navigateur différentes), les attributs HTML5 lorsqu’ils sont servis dans une application XHTML doivent toujours utiliser une valeur “true”, au moins jusqu’à ce qu’une future spécification supprime l’inutile ambiguïté.

<input disabled="true" type="button" value="XHTML Button" />