SELFHTML/Aides à la navigation HTML/XHML XHTML et HTML| SELFHTML/Aides à la navigation HTML/XHML XHTML et HTML |
Le concept des langages de marquage dont HTML est un parmi beaucoup d'autres mais toutefois le plus populaire et le plus connu dans le monde jusqu'alors - ce concept donc est déjà plus ancien. Une particularité du concept de ce genre de langages de marquage est que ses composantes ne sont pas simplement "inventées", mais qu'il y a des langages Meta à l'aide desquels sont définies les règles et les composantes de tels langages de marquage.
Depuis 1986 déjà existe le langage Meta standardisé sous l'appellation ISO 8879 SGML (Standard Generalized Markup Language = langage de marquage généralisé standard). Ce langage Meta permet la définition de langages de marquage à l'aide de ce qu'on appelle les DTDs (Document Type Definitions = définitions de type de document). Dans les DTDs sont fixés quels éléments un langage de marquage a, quels attributs ils comprennent ainsi que les règles qui fixent quels éléments peuvent être placés dans quels autres etc... Maintenant SGML est bien rodé et passe généralement pour assez "sophistiqué". Ainsi on prit la décision d'établir une variante réduite de SGML et cela sous le nom de XML (Extensible Markup Language = langage de marquage extensible). XML permet de la même façon que SGML la définition de langages de marquage à l'aide de DTDs.
HTML, qui apparut au début des années 1990, a été défini avec SGML. Jusqu'à HTML 4.x inclus, c'est encore aujourd'hui le cas. Sur la lancée de XML et de son importance croissante pour toujours plus de formats de fichier qui sont aussi utilisés sur la toile, le souhait se fit jour de définir aussi HTML à l'aide de XML plutôt qu'avec SGML comme c'était le cas jusqu'alors. Afin que cela ne donne pas lieu à une confusion dans les versions, on se décida à doter ce nouveau HTML basé sur XML d'un nouveau nom et de son propre contrôle de versions. Ce qui donna naissance à XHTML (Extensible HyperText Markup Language = langage de marquage hypertexte extensible).
Depuis janvier 2000 XHTML 1.0 se trouve dans les recommandations du consortium W3 et a de ce fait la même place officielle que HTML 4.0 par exemple. XHTML 1.0 n'est rien d'autre que la tentative de faire évoluer HTML 4.0 basé sur SGML à l'aide de XML. Ce n'est pas une simple lubie de concepteurs de langages artificiels, mais il y a de bonnes raisons qui plaident pour le faire:
langages standard XML importants tels que SVG, WML, SMIL etc... îlot de données dans d'autres langages et que de la même façon, il est possible d'incorporer ces autres langages comme îlots de données en XHTML. Ainsi par exemple, il est possible sans problème d'incorporer un fichier graphique SVG comme îlot de données dans un fichier XHTML. Le fichier graphique SVG ne doit plus de ce fait être référencé mais fait partie intégrante du fichier XHTML.XHTML est donc du HTML conforme à XML. L'"évolution" de HTML 4.0 en XHTML 1.0 est à ce point réussie qu'existent en XHTML les mêmes éléments, attributs et règles d'imbrication qu'en HTML. Il y a toutefois quelques différences de détail imposées par la syntaxe de XML et qu'il vous faut connaître si vous voulez écrire vos pages en XHTML plutôt qu'en HTML.
En ce qui concerne la compatibilité des navigateurs, il n'y a pas de problème majeur. Les navigateurs qui s'en sortent avec HTML 4.0, peuvent aussi traiter les documents écrits en XHTML, et les affichent à l'écran exactement de la même façon qu'avec HTML. Des problèmes ponctuels, en particulier avec les navigateurs plus anciens, ne sont par contre pas à exclure.
 
|
Le Type Mime
pour des documents HTML ordinaires est toujours text/html.
Les documents XHTML peuvent également avoir ce type Mime. En même temps, les types Mime text/xml ou application/xml sont cependant également permis. Pour l'établissement de fichiers XHTML c'est sans importance. Ça l'est pourtant pour la communication entre le navigateur Web et le serveur Web. Au cas où le serveur Web propose, dans un environnement HTTP, le fichier appelé en tant que fichier du type text/xml ou bien application/xml, la navigateur doit accepter ce type Mime et se sentir en mesure d'afficher des fichiers de ce type à l'écran. Dans le cas contraire, il peut arriver par exemple que le navigateur propose à l'utilisateur de télécharger le fichier au lieu de le charger pour affichage à l'écran.
|
|
Les navigateurs plus récents supportant XML (Explorer Internet à partir de la version 5.x, Netscape à partir de la version 6.x) traitent les fichiers différemment selon leur extension, s'ils n'ont pas d'indications (type Mime). Quand vous respectez dans un fichier toutes les règles de XHTML mais sauvegardez le fichier avec les extensions typiques .htm ou bien .html, ces navigateurs utilisent leur analyseur syntaxique HTML. Sauvegardez par contre le fichier avec une autre extension, par exemple .xhtml, alors les navigateurs utilisent leur analyseur syntaxique XML. La différence se fait avant tout sentir quand le document contient des erreurs de syntaxe. Les analyseurs syntaxiques HTML habituels aujourd'hui laissent tout simplement passer des fautes de syntaxe dans le document et tentent d'afficher le document "tant bien que mal". Les analyseurs syntaxiques XML par contre interrompent avec un message d'erreur dès qu'ils butent sur une faute de syntaxe. Dans la fenêtre d'affichage du navigateur apparaît alors un message d'erreur à la place du document.
Pour la représentation de documents XHTML sans erreur et contrôlés par l'analyseur de syntaxe XML, sans CSS ou autres feuilles de style, les navigateurs réagissent différemment. Netscape 6.x affiche le document comme un document HTML donc avec les représentations par défaut pour les titres, paragraphes, listes, tableaux etc... L'Explorer Internet représente par contre ces documents comme une pure arborescence d'éléments. Ce n'est que lorsque vous avez formaté les éléments employés avec des feuilles de style CSS que l'Explorer Internet affiche le document autrement que sous forme d' organigramme.
Donc aussi longtemps que vous enregistrez des fichiers conformes à XHTML avec la terminaison typique .htm ou bien .html , vous obtenez une représentation "normale" dans le navigateur, mais empêchez aussi que les fichiers dans le navigateur ne soient traités sur la base de XML. Enregistrez par contre les fichiers avec une autre terminaison inconnue du navigateur ou associée au type Mime text/xml, alors les fichiers seront certes traités sur la base de XML mais ne devront contenir aucune faute de syntaxe, et si dans la fenêtre d'affichage de l'Explorer Internet doit apparaître quelque chose d'autre qu'une structure arborescente, il vous faut utiliser les feuilles de style pour formater les éléments.
|
|
La toute première chose qui doit être notée au début d'un fichier XHTML est ce qu'on appelle une déclaration XML. Vous spécifiez ainsi que le fichier qui suit contient des données conformes à XML. Une telle déclaration n'existe pas en HTML 4.0 et est donc spécifique à XHTML.
<?xml version="1.0" encoding="UTF-8"?> |
Notez cette mention telle qu'elle est indiquée dans l'exemple: dans la première ligne du fichier XHTML, en respectant le point d'interrogation, les minuscules et les majuscules. Pour l'instant n'est pertinente pour l'attribut version= que la valeur 1.0. Pour l'attribut encoding= vous pouvez mentionner un jeu de caractères d'après lequel les données du fichier doivent être interprétées.
encoding="UTF-8" exprime le jeu de caractères international sur la base de la norme ISO/IEC-10646 (Unicode) avec une largeur de caractère de 8 bits c'est à dire qu'un octet correspond à un caractère dans le fichier.
encoding="UTF-16" exprime le jeu de caractères international sur la base de la la norme ISO/IEC-10646 (Unicode) avec une largeur de caractère de 16 bits c'est à dire que deux octets correspondent à un caractère dans le fichier.
|
|
XHTML 1.0 et HTML 4.0 ont des mentions de type de document différentes. La mention de type de fichier se réfère à la DTD et à la langue que vous employez dans le fichier et auxquelles vous voulez vous tenir. Un analyseur syntaxique rigoureux peut empêcher l'affichage du fichier par exemple dans le navigateur, quand le fichier contient des erreurs de syntaxe. Une erreur de syntaxe typique ici est la DTD à laquelle vous vous référez dans la mention du type de document.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
Les exemples montrent comment sont notés les types de document pour HTML 4.01 et XHTML 1.0 pour la variante HTML "Strict". Même en XHTML 1.0 existent les trois variantes "Strict", "Transitional" et "Frameset", exactement comme en HTML 4.0. Les deux autres variantes pour XHTML sont:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
et
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Ainsi qu'il est noté ci-dessus, un analyseur syntaxique XML rigoureux établira une connexion Internet pour charger la DTD de l'adresse Web indiquée pour comparer le document avec les règles contenues dans la DTD. Vous pouvez intégrer les DTD dans votre propre projet. À supposer que vous ayiez un fichier de départ du nom de index.htm et que vous ayiez enregistré le fichier xhtml1-strict.dtd dans un répertoire distinct du nom de html-dtd, alors vous pouvez noter dans le fichier index.htm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "html-dtd/xhtml1-strict.dtd">.
Vous pouvez 
télécharger les DTD nécessaires pour XHTML . Le fichier Zip (31 Koctets) contient les DTD pour les trois variantes "Strict", "Transitional" et "Frameset" ainsi que trois fichiers supplémentaires avec des définitions pour les signes nommés.
|
|
Le repère d'introduction <html> en HTML n'a en principe aucun attribut. En XHTML pourtant, vous devez mentionner explicitement le nom d'espace de nommage pour XHTML.
<html> <!-- contenu du fichier --> </html> |
<html xmlns="http://www.w3.org/1999/xhtml"> <!-- contenu du fichier --> </html> |
En XHTML notez toujours dans le repère d'ouverture <html> l'attribut xmlns= qui désigne un espace de nommage XML et affectez lui la valeur http://www.w3.org/1999/xhtml. C'est une URI spéciale qui n'est pas conçue comme la mention d'une adresse Web à appeler mais qui se sert en fin de compte du schéma de l'adressage Web, pour affecter un nom sans ambiguïté à l'échelle du monde pour l'espace de nommage. L'adresse Web existe certes, parce que le consortium W3 a été assez gentil pour éviter l'accumulation d'appels erronés sur leur serveur - pourtant l'adresse ne signifie rien d'autre que si l'on avait fixé comme nom: "Specification-XHTML-Superdupe".
|
|
Quand en HTML vous omettez les éléments head et body et que sinon entre <html> et </html> vous notez du code HTML valide, il s'agit alors du point de vue de HTML d'un document sans faute. Cette licence n'existe pas en XHTML. Là un fichier HTML doit impérativement respecter l'ossature habituelle et contenir un repère head et un repère body. Par ailleurs l'élément title dans l'élément head est impérativement nécessaire et doit être noté comme premier élément du repère head.
<html> <h1>Texte</h1> </html> |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Texte</title> <!-- le cas échéant autres éléments de l'entête --> </head> <body> <h1>Texte</h1> </body> </html> |
La forme indiquée pour noter un document HTML 4.0 est certes loin d'être recommandée pour la pratique mais au moins elle n'est pas fausse. Pour un document XHTML par contre l'ossature complète, y compris l'élément title doit toujours être notée.
|
|
En HTML 4.0, peu importe si vous notez <TABLE BORDER="0">, <TABLE border="0"> ou bien <Table Border="0">. HTML ne fait pas de distinction entre les majuscules et les minuscules pour les noms de repères HTML ou pour les noms d'attributs. Seule la distinction entre minuscules et majuscules est faite pour l'affectation de valeur de certains attributs - mais ce n'est aussi que par égard pour les langages script. Pour les attributs avec des valeurs permises fixes, comme par exemple align=, peu importe que vous notiez CENTER ou bien center. Il n'en va pas de même pour XHTML. XML différencie à vrai dire strictement les minuscules des majuscules. Ce qui veut dire que <TABLE> est quelque chose d'autre que <table>. Pour XHTML il a été fixé que tous les noms d'éléments et d'attributs sont écrits en minuscules. Il en va de même aussi pour les affectations de valeurs fixes comme center.
<OBJECT DATA="Video.mpg" TYPE="video/mpeg" ALIGN="LEFT"></OBJECT> |
<object data="Paris.mpg" type="video/mpeg" align="left"></object> |
En XHTML, écrivez toujours tous les noms d'éléments comme object ou d'attribut comme data ou bien type en minuscules. En cas de doute, écrivez de la même manière les affectations de valeurs toujours en minuscules, donc par exemple pour align="left". Il n'y a que là où, dans une affectation de valeur, certaines majuscules sont nécessaires comme par exemple pour le nom de fichier Paris.mpg, que vous pouvez écrire la valeur comme il est correct de le faire.
|
|
En HTML 4.0 existent différents éléments vides. Ce sont les éléments sans repère de fermeture. Le repère de fermeture est interdit parce que les éléments sont définis comme étant vides. Exemples:
<img>, <br>, <input>, <hr>.
Dans les langages basés sur XML, donc également en XHTML, ces éléments vides doivent être marqués spécialement.
<p>Texte avec<br>passage à la ligne</p> <p><img src="image.gif" alt="une image"></p> |
<p>Texte avec<br />passage à la ligne</p> <p><img src="image.gif" alt="une image" /></p> |
Notez tout de suite avant la parenthèse pointue de fermeture (>) du repère autonome une barre oblique de façon à ce que la chaîne de caractères /> soit à la fin. Avant la barre oblique, doit figurer un espace. Une autre possibilité est de noter un repère d'ouverture et un repère de fermeture par exemple <br></br>. Cependant rien ne doit figurer (ni espace, ni passage à la ligne)entre le repère d'ouverture et le repère de fermeture, sinon ce serait du XHTML invalide.
Si vous utilisez sans contenu des éléments qui peuvent avoir du contenu par exemple <p></p>, alors notez les en XHTML toujours sous cette forme et jamais sous la forme <p />.
|
|
En HTML 4.0 existent différents éléments avec repère de fermeture facultatif. exemples:
<body>, <td>, <dd>, <dt>, <option>.
Notez toujours ces éléments en XHTML avec repères d'ouverture et de fermeture.
<select name="choix" size="1"> <option>1er enregistrement <option>2ème enregistrement <option>3ème enregistrement </select> |
<select name="choix" size="1"> <option>1er enregistrement</option> <option>2ème enregistrement</option> <option>3ème enregistrement</option> </select> |
Tous les éléments qui peuvent avoir un contenu doivent en XHTML être marqués par un repère d'ouverture et un repère de fermeture.
|
|
En HTML 4.0 existent différents attributs qui ne se voient pas affecter la moindre valeur. exemples:
<hr noshade>, <td nowrap>, <script defer>.
Dans les langages basés sur XML ce type d'attributs n'existe pas. Tous les attributs doivent recevoir une valeur. En XHTML vous devez donc attribuer à ces attributs une valeur quelconque. On s'est mis d'accord pour attribuer comme valeur tout simplement le nom de l'attribut.
<td nowrap>contenu</td> <p>Texte avec<hr noshade>Ligne de séparation</p> |
<td nowrap="nowrap">contenu</td> <p>Texte avec<hr noshade="noshade" />Ligne de séparation</p> |
Affectez comme valeur aux attributs vides en XHTML simplement leur propre nom. Pour la plupart des navigateurs connus, cela ne pose aucun problème.
|
|
Pour les affectations de valeur aux attributs, vous devez faire plus attention en XHTML qu'en HTML. Les espaces sont permis là où ils sont nécessaires, pourtant il vous faut absolument éviter les passages à la ligne.
<p title="Commencement de l'histoire">Texte Texte Texte</p> |
<p title="Commencement de l'histoire">Texte Texte Texte</p> |
Évitez ce genre de notations.
|
|
En HTML vous pouvez noter des liens à des ancres par exemple:
<a href="#ancre">Lien</a>
L'ancre correspondante est alors notée avec:
<a name="ancre">quelque chose</a>
Même les autres attributs comme par exemple l'attribut usemap dans le repère <img> pour mener à un élément map pour lequel un attribut correspondant name est d'autre part noté utilisent cette technique.
En XHTML ces liens ne fonctionnent pas. XML a besoin de noms du type "ID", donc d'indicateurs sans ambiguïté pour tout le document, pour être en mesure de résoudre de telles relations. En XHTML vous pouvez utiliser l'
attribut universel id= pour réaliser ce genre de liens. Afin que même les navigateurs qui ne supportent pas XHTML s'en sortent eux aussi, il vous faut noter les deux attributs.
<a href="#ancre">lien</a> <p>beaucoup de contenu</p> <a name="ancre">quelque chose</a> |
<a href="#ancre">Lien</a> <p>beaucoup de contenu</p> <a id="ancre" name="ancre">quelque chose</a> |
Notez dans l'élément a pour l'ancre les deux attributs id= et name=. Affectez aux deux attributs exactement le même nom. Cela n'occasionne aucun problème étant donné que les deux attributs ont des "espaces de nommage différents". Un navigateur qui veut exécuter le lien d'après la syntaxe XHTML a besoin de l'attribut id tandis qu'un navigateur qui exécute le lien d'après la syntaxe HTML utilise l'attribut name pour rechercher l'ancre.
|
|
Les langages basés sur XML utilisent normalement à la place de lang= l'attribut universel XML xml:lang=. Étant donné que l'attribut lang est pourtant également disponible en XHTML, existent deux attributs pour la même chose. Les analyseurs syntaxiques XHTML préfèrent pour lever toute ambiguïté l'attribut xml:lang=, qui n'est pas reconnu par les analyseurs syntaxiques purement HTML. Notez toujours pour cette raison dans la pratique les deux variantes au cas où vous utilisez l'attribut.
<p lang="fr">beaucoup de contenu</p> |
<p xml:lang="fr" lang="fr">beaucoup de contenu</p> |
Notez les deux attributs. L'ordre n'a pas d'importance.
|
|
En HTML 4.0 le contenu des éléments script et style est fixé en tant que "CDATA", tandis qu'il est traité en tant que "PCDATA" en XHTML. En clair, cela veut dire que pour HTML 4.0 dans un passage script ou de style les signes propres à HTML comme <, >, & et " ne doivent pas être masqués. Il n'en va pas de même pour XHTML. Quand par exemple vous comparez dans une condition si une valeur est plus petite ou plus grande qu'une autre valeur, vous devez noter les parenthèses pointues (plus grand que, plus petit que) hors d'une chaîne de caractères et ne pouvez donc pas les masquer à cet endroit. Pour résoudre le problème, vous pouvez forcer le passage script lui même en tant que passage "CDATA". Pour ce faire, il vous faut employer la notation XML typique correspondante. Ainsi le problème n'est toutefois résolu que pour les analyseurs syntaxiques XML. Les interpréteurs JavaScript normaux pensent à peu près pour cette syntaxe qu'ils ont affaire à du JavaScript et génèrent une erreur car il ne s'agit pas de JavaScript valide. Dans ce cas il ne reste plus qu'à enregistrer le script dans un fichier externe.
<script type="text/javascript">
<!--
/* Commentaire JavaScript: maintenant suit un petit script */
if(parseInt(navigator.appVersion) < 4)
alert("Oh, un très vieux navigateur");
/* et avec cela le script est déjà terminé */
//-->
</script>
|
<script type="text/javascript">
<!--
<![CDATA[
/* Commentaire JavaScript: maintenant suit un petit script */
if(parseInt(navigator.appVersion) < 4)
alert("Oh, un très vieux navigateur");
/* et avec cela le script est déjà terminé */
]]>
//-->
</script>
|
La déclaration "CDATA" commence avec <![CDATA[ et se termine avec ]]>. Notez cela pour XHTML en plus dans le commentaire HTML, dans lequel vous voulez placer les contenus des passages script ou de style. Dans le cas contraire un analyseur syntaxique XML signalerait le signe < comme erreur, s'il se trouvait dans le script.
Pour éviter les erreurs pour les interpréteurs JavaScript, reste la possibilité de noter les scripts JavaScript dans des fichiers séparés . Même pour les feuilles de style CSS il est possible de définir un format global dans un fichier CSS séparé .
|
|
En HTML 4.0 sont définies quelques exceptions pour les règles d'imbrication d'éléments. Il est arrêté par exemple qu'un repère a ne peut contenir d'autre repère a. À l'aide de SGML la formulation de telles exceptions est possible. XML ne propose aucune possibilité de formuler ces exceptions. Dans les DTD (définitions de type de document) basés sur XML de XHTML, ces interdictions spéciales d'imbrication manquent pour cette raison. Étant donné qu'une compatibilité à 100% entre HTML et XML doit être atteinte, la seule issue pour le consortium W3 était de déclarer ces interdictions officieusement comme "annexe officielle" aux DTD de XHTML.
Les règles d'imbrication suivantes sont concernées:
a ne doit contenir aucun autre élément a.pre ne doit contenir aucun élément img, object, big, small, sub ou bien sup.button ne doit contenir aucun élément input, select, textarea, label, button, form, fieldset, iframe ou bien isindex.label ne doit contenir aucun autre élément label.form ne doit contenir aucun autre élément form.|
|
Exemple d'un document XHTML conformeL'exemple suivant montre un document XHTML complet dans lequel les différences avec HTML peuvent encore être vues dans un contexte. Vous pouvez appeler l'aperçu correspondant d'abord en tant que fichier avec l'extension .htm, une fois en tant que fichier avec l'extension .xhtml et une fois en tant que fichier avec l'extension .xml pour tester par vous-même ce qui se passe alors dans votre navigateur. Il s'agit exactement du même contenu, seuls les noms de fichier sont différents.
Exemple d'affichage: aperçu (exemple.htm)
Exemple d'affichage: aperçu (exemple.xhtml)
Exemple d'affichage: aperçu (exemple.xml)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Quand du HTML devient du XHTML</title> </head> <body> <h1><a name="Start" id="Start">Quand du HTML devient du XHTML</a></h1> <p>Alors tous les éléments avec un contenu doivent avoir un repère de fermeture.</p> <p>Les éléments vides<br /> doivent se terminer par une barre oblique.</p> <hr noshade="noshade" /> <p>Les attributs vides reçoivent comme affectation de valeur leur propre nom.</p> <p><a href="#Start">Les liens à des ancres</a> mènent à la cible en raison de l'attribut id et non pas de l'attribut name.</p> <script type="text/javascript" src="horodateur.js"></script> <!-- c'est la façon la plus sûre pour des scripts --> </body> </html> |
L'exemple montre un document XHTML complet typique avec différentes particularités . la DTD nommée xhtml1-strict.dtd se trouve dans le même répertoire que le document lui-même, c'est pour cette raison que pour la mention du type de document n'est noté comme URI que xhtml1-strict.dtd sans autre adresse Web, ni mention de chemin.
|
| |
 |
Modularisation de XHTML
|
 |
Gestionnaire d'événements pour les scripts
|
| SELFHTML/Aides à la navigation HTML/XHML XHTML et HTML |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org