Sur cette page :

  1. Une page HTML type
    1. La DTD : DocType Definition
    2. La balise <html>
    3. En-tête et corps de page

Une page en XHTML commence par une la DTD, ou DocType Definition, qui permet d’indiquer le langage du document que le navigateur va lire. La page est ensuite constituée d’une balise englobant toutes les autres, la balise <html>, qui contient deux éléments enfants : l’en-tête <head>, et le corps de la page <body>.

4.1# La DTD : DocType Definition

Il existe deux versions de XHTML : la version 1.0 et la version 1.1. La version 1.0 est déclinée en trois variantes, tandis que la dernière n’admet qu’une seule version, correspondant à la variante strict, avec d’infimes nuances.

En XHTML 1.0, la variante transitional est utilisée pour passer en douceur de HTML 4 à XHTML. Elle sera principalement utilisée pour faire des portages rapides de pages HTML 4 vers XHTML, sans avoir à les modifier en profondeur pour qu’elles respectent les normes. Je vous la déconseille puisqu’elle est vouée à disparaître : son but est de permettre une compatibilité future puisqu’elle autorise certaines balisées vouées à disparaître.

La variante frameset permet d’utiliser la technologie des frames, ou cadres, devenue particulièrement détestée à cause des problèmes qu’elle soulève, et parce que les avantages de cette vieille technologie peuvent être reproduits très simplement.

Enfin, la variante strict, que l’on préférera de loin est la plus restrictive, mais aussi celle qui vous garantira de maîtriser le mieux le résultat.

La syntaxe de la DTD est la suivante :

  1. <!DOCTYPE [langage] PUBLIC "-//[Auteur du langage]//[Nom de la DTD]//[Langue des balises]" "[Adresse du fichier DTD]">

Elle indiquera au navigateur l’adresse du fichier DTD, c’est à dire le fichier qui définit la grammaire du langage. Ce fichier est inclus dans les navigateurs. Il serait utile pour demander à un programme de valider la syntaxe de notre page.

Voici les trois DTD correspondant aux variantes de XHTML 1.0 :

  • Strict :
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Transitional :
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Frameset :
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Attention : La DTD n’est pas une balise, comme vous venez de le voir, sa syntaxe n’a pas à répondre aux règles que nous avons vu précédemment.

Vous pouvez également utiliser le doctype 1.1, mais pour respecter strictement les normes, le serveur devra considérer que la page est un document XML et plus simplement HTML (nous en parlons dans le document Complément# XHTML et le type MIME).

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4.2# La balise <html>

Après la DTD, cette balise devra encadrer la totalité de votre page. C’est nécessairement l’élément racine de tout code html. On précise généralement l’espace de noms (namespace) XHTML à l’aide de l’attribut xmlns, qui permet, à l’instar de la DTD, de préciser à quel langage appartiennent les balises utilisées. On précisera également dans les attributs la langue (lang et/ou xml:lang du contenu de la page et son sens de lecture (pour les langues s’écrivant de droite à gauche) avec l’attribut dir, qui admet les valeurs ltr (de gauche à droite, left to right, par défaut) et rtl (de droite à gauche, right to left).

Ainsi, notre page HTML ressemble maintenant à cela :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr" dir="ltr">
  3.   <!-- Contenu HTML -->

Ces trois attribut sont optionnels, mais il est très courant de préciser l’espace de noms et la langue de la page. Notez par ailleurs qu’en XHTML 1.1, lang disparait complètement au profit de xml:lang.

4.3# En-tête et corps de page

Comme la plupart des fichiers informatiques, une page HTML doit contenir un en-tête et un corps de page. L’en-tête contient des informations destinées aux programme qui interprèteront la page, aucune information ne sera donc affichée à l’utilisateur. Elle contient généralement les méta-données, utilisées pour classées les documents (comme par exemple les “tags ID3” intégrés aux fichiers musicaux qui contiennent artistes, titres et albums de l’extrait), mais aussi définir les fichiers attachés à celui-ci (feuilles de style, icône de favoris, etc).

La zone d’en-tête est définie par la balise <head>, généralement sans attribut. Elle contient l’élément <title> qui contient, comme son nom l’indique, le titre de la page (affiché généralement en titre de fenêtre du navigateur, et très utilisé par les moteurs de recherche), des éléments <meta> pour définir les méta-données et <link> pour lier un fichier externe à la page.

Voici un exemple de page contenant un en-tête minimal :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr" dir="ltr">
  4.   <title>Titre de la page</title>
  5.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.   <meta name="author" content="Martin Richard" />

La balise <meta> possède un statut un peu particulier en HTML, certains meta sont obligatoires, d’autres ne dépendent absolument pas de la norme HTML. Le premier élément <meta> de cet exemple de code contient des méta-données définies par le protocole HTTP, dans ce cas, l’élément possède un attribut http-equiv dont la valeur est le nom de l’une des méta-données. Ici, on définit le type MIME du document et le charset (encodage des caractères utilisé). Le second <meta> contient lui une méta-donnée qui ne correspond à aucun standard (sinon le mien !) : le nom de cette méta-donnée est indiqué par l’attribut name (et plus http-equiv), et comme pour le premier meta, sa valeur est précisée par l’attribut content.

Le corps de page est placé dans l’élément <body>, c’est à l’intérieur de cet élément que nous trouverons le contenu qui sera affiché. Voici donc un exemple de page XHTML 1.0 prêt à être utilisé :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr" dir="ltr">
  4.   <title>Titre de la page</title>
  5.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  8.   <!-- Contenu de la page -->