Ce chapitre sera plus technique. À la fin, vous connaîtrez les éléments constituants d'un fichier XHTML complet et vous aurez appris la procédure à suivre pour vérifier la validité syntaxique d'un fichier.
Activez le lien suivant pour vous rendre sur le site du Validateur HTML du W3C. Allez dans la section « Validate by File Upload » et activez le bouton Parcourir…. Sélectionnez le fichier test.html, appuyez sur Ouvrir et, finalement, sur le bouton Check.
La sanction du validateur ne tardera pas à se manifester : This page is not Valid! J'expliquerai bientôt pourquoi. En attendant, remplacez le contenu du fichier test.html par le code suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title></title>
</head>
<body>
</body>
</html>Enregistrez les modifications et vérifiez de nouveau la validité du fichier. Cette fois, vous aurez droit à des félicitations : This Page Is Valid XHTML 1.0 Strict!
Le nouveau contenu du fichier test.html est celui à partir duquel je vous ferai désormais travailler. Il est valide et constitue un exemple de ce à quoi peut ressembler le contenu minimal d'un document XHTML complet.
Observez le code ci-haut et notez la manière dont les balises sont contenues les unes dans les autres. Schématiquement, la structure de ce code ressemble à ceci :
<!DOCTYPE>
<html>
<head>
<meta />
<title></title>
</head>
<body>
</body>
</html>Tous ces éléments sont requis à la validité d'un document XHTML. Il y en a 10. Notez les syntaxes particulières du DOCTYPE et de l'élément meta, auxquels ne correspond aucune balise fermante.
Ces observations faites, on peut procéder à une analyse ligne par ligne. Il ne s'agira pas de tout expliquer, mais d'en dire assez pour faire comprendre l'essentiel.
Il existe plusieurs versions de HTML. Le DOCTYPE sert à spécifier celle qu'on utilise et c'est pourquoi il doit être placé avant l'élément html.
J'ai choisi de vous enseigner le XHTML 1.0 Strict et cette version de HTML doit être déclarée comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Je m'expliquerai plus tard sur les raisons de ce choix.
En XHTML, tous les noms d'élément doivent être écrits en lettres minuscules, exception faite pour le DOCTYPE. Retenez ceci : le XHTML est sensible à la casse.
L'élément html contient tous les autres et c'est ce qui lui vaut l'appellation d'« élément racine ».
Les portions de code xml:lang="fr" et lang="fr" servent à déclarer la langue principale du document. Si vos contenus sont en anglais, remplacez fr par en.
Cette information est utile aux moteurs de recherche, mais aussi à ceux qui font usage d'un logiciel de synthèse vocale. Imaginez une page en français lue par un robot qui croit avoir affaire à de l'anglais et vous comprendrez vite pourquoi.
L'élément body est celui dans lequel il faut mettre tout ce que vous voulez que votre page Web contienne. Il vaut pour « corps de document ».
Quant à l'élément head, dont le nom signifie « tête », il contiendra surtout des informations utiles aux navigateurs, aux moteurs de recherche et aux autres agents utilisateurs. Il peut contenir des scripts, des règles de style, des mots-clés, les coordonnées de l'auteur, la date de création du document, etc.
À l'exception du titre — qui est obligatoire —, le contenu de l'élément head est facultatif et ne sera pas directement visible à vos visiteurs.
L'élément title est indispensable et son contenu mérite d'être soigné. Ce qui s'y trouve aura une influence sur le classement de votre page et sur les résultats d'une requête dans un moteur de recherche.
C'est aussi la toute première chose qui sera portée à la connaissance des handicapés visuels qui consulteront la page depuis un afficheur braille ou un logiciel de synthèse vocale.
Pour consulter le Web, les personnes avec des limitations fonctionnelles ont souvent besoin d'outils spéciaux. Si votre code est correct et valide, leurs outils pourront donner leur plein rendement.
Si quelqu'un décide de créer un signet (appelé aussi « marque-page » ou « favori ») vers votre page ou s'il décide d'y revenir depuis l'historique de son navigateur, c'est à votre titre qu'il aura à se fier pour s'y retrouver.
Les navigateurs graphiques affichent le contenu de l'élément title dans la barre de titre. Celui de la présente page se lit comme suit : « 5. Votre premier fichier valide [Cours de XHTML] ». Il se trouve au coin supérieur gauche de votre écran. Aviez-vous remarqué ?
Bref, un titre inadéquat ou absent et c'est le contenu de la page au complet qui risque de tomber dans l'oubli le plus total. D'où les quelques conseils qui suivent :
Reste l'élément meta, qui vaut pour « generic metainformation ». L'élément head peut contenir une multitude d'éléments meta. Le seul qui nous sera vraiment nécessaire ressemble à ceci :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />Cette ligne sert à spécifier le type d'encodage utilisé par votre éditeur de texte au moment d'enregistrer votre fichier. Comme je vous ai fait encoder votre fichier en UTF-8, je vous fais mettre utf-8.
Bloc-notes donne aussi la possibilité d'encoder en ANSI, mais il n'y a pas de charset=ansi et cela pourrait causer des problèmes dans certaines circonstances. C'est pourquoi j'ai opté pour UTF-8.
Les éléments constituants d'un document XHTML complet sont les suivants : DOCTYPE, html, head, meta, title et body. L'absence d'un seul compromet la validité de l'ensemble.
Pour rendre votre curriculum vitæ valide, copiez-collez l'exemple de code qui se trouve à la section 5.1 et insérez ce que vous aviez préalablement fait à l'intérieur des balises <body> et </body>. Validez ensuite votre fichier. S'il s'y trouve des erreurs, le validateur vous indiquera lesquelles. Commencez toujours par corriger les premières avant de vous attaquer aux suivantes.
À jour le 4 mars 2006