• Article
  • Discussion
  • Voir le texte source
  • Historique

Structure d'une page XHTML

Un article de Eric Bruyndonckx.

Sommaire

Vos premiers pas

Afin de pouvoir vous aider dans la conception de vos documents et ainsi pouvoir validez votre code, utilisez l'outils proposé par le W3C : http://validator.w3.org/

La structure d'une page XHTML

Un fichier XHTML traditionnel comprend toujours un certain nombre d'éléments obligatoires. Le but est de préparer l'organisation des données ainsi que de spécifier au navigatuer diverses informations sur l'encodage de la page :

  • Le doctype (mention du type de document)
  • L'entête du document (header)
  • Le corps du document (Body) 
<!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>Titre du document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
  <body>
    <p>Moteur de recherche <a href="http://www.google.ch/">Google</a>.</p>
  </body>
 </html>

Explications

La Mention du type de document 

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

La déclaration ci-dessus spécifie la version (X)HTML utilisée. Pour la norme XHTML 1.0, on distingue les 3 DTD's suivantes (Document Type Definition : documents XML du W3C définissant les différentes balises et leur fonctionnement) :

  • Strict : n'autorise que les balises non dépréciées
  • Transitional : idem à Strict plus balises/attributs dépréciés en faveur de CSS
  • Frameset : idem à Transitional plus balises relatives aux frames

Ce choix dépend de l'utilisation finale de la page et de sa destination ainsi que de vos contraintes de conception.

Dans la majorité des cas, XHTML 1.0 Transitionnal s'avère être un bon compromis.


Si vous souhaitez qu'ne page soit conforme au recommandations du W3C, votre code doit répondre aux contraintes du doctype choisi. A titre d'exemple, en choisissant XHTML 1.0 Strict, vous ne pouvez pas utiliser l'attribut target dans la balise <a> car en XHTML 1.0 Strict, la navigation doit se faire constamment dans la même fenêtre du navigateur afin dêtre compatible avec les navigateurs ne proposant pas cette fonctionnalité

Le Header (l'entête) 

<head>
  <title>Titre du document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="subject" content="100 caractères"/>
  <meta name="description" content="250 caractères"/>
  <meta name="keywords" content="1'000 caractères"/>
  <meta name="language" content="fr"/>
  <meta name="author" content="votre nom"/>
  <meta name="copyright" content="heig"/>
 </head>


Les balises <head> et </head> contiennent des informations non visibles par l'internaute, à l'exception du titre de la page, mais primordiales pour un affichage correct de celle-ci ainsi que pour son bon référencement.

Cette section comporte des informations telles que :

  • le Titre du document (apparaîtra dans la barre de titre de votre navigateur). Il s'agit d'une balise très importante à ne pas négliger ! Référez-vous au chapitre référencement.
  • Viennent ensuite les balises metas, si la plupart d'entre elles sont facultatives, l'une d'elles est primordiale <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Cette balise spécifie le jeu de caractère utilisé dans votre document. Ceci est important pour que les accents s'affichent correctement.

Les six autres balises metas sont importantes pour le référencement.

Le Body (le corps de votre document)

Le corps du document qui contiendra la structure de votre page se trouve entre les balises <body> et </body> 

<body>
   ... contenu visible du fichier ...
</body>

Le corps est composé de différentes balises qui elles-mêmes comportent des attributs.

Voir aussi

Récupérée de « http://www.ebx.ch/mediawiki1/index.php/Structure_d%27une_page_XHTML »