La structure de base

Le document XHTML contient une structure qui peut paraître assez chargé à première vu. Beaucoup de balises sont nécessaires ou généralement présentes. Je peux tout d'abord vous rassurez qu'il ne faut pas apprendre toutes ses balises et ses attributs par coeur.

Par exemple, pour générer la structure type de mes documents, j'utilise habituellement mon outil en ligne GenXHTML. Il me permet de choisir le bon type de document, d'inscrire le titre, l'encodage, l'espace de nom, la langue du document et les informations de classement (meta) du document.

Cette page permet de vous donner des explications sur chacune des balises et attributs de la structure de base du document. Une fois que vous comprendrez ses balises, un simple copier-coller d'un patron (template) permettra de créer rapidement vos documents XHTML.

Les 4 premières balises

L'instruction <?xml?>

Chaque document XML devrait commencer par une instruction d'exécution (processing instruction ou PI) pour identifier la version XML utilisée. 

<?xml version="1.0" encoding="UTF-8"?>

Cette instruction renseigne l'analyseur XML (de votre navigateur) qu'il s'agit de la version 1.0 du langage XML et que le reste du document est encodé selon le jeu de caractère UTF-8. On peut aussi utiliser les formats ISO-8859-1 très répandu au Québec ou ISO-8859-15 pour l'Europe. L'ISO-8859-15 contient le caractère €. Par contre, au lieu d'utiliser l'encodage ISO-8859-15 pour seulement un caractère, on peut utiliser l'UTF-8 et utiliser l'entité &euro; dans notre document.

Le type de document

Après la première instruction, on doit choisir le type de document. Il en existe trois en XHTML 1.0 et un seul en XHTML 1.1. Note: il en existe plusieurs autres types pour les mélanges: XHTML+Mathml+SVG par exemple. Ces documents, les DTD, contiennent la liste des balises et des attributs permis dans le reste du document XHTML. On pourrait comparer ce DTD à un dictionnaire. Le reste du texte ne pourrait contenir que les mots définis dans ce dictionnaire.

Voici une manière très "simpliste" pour les choisir:

  • Si vous voulez une compatibilité XML stricte, une interraction poussée avec les autres langages XML, aucun support pour le HTML ou les éléments dépréciés, l'utilisation de l'extension RUBY (textes multi-directionnels), le XHTML 1.1 devrait être votre meilleur choix.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • Si vous voulez une compatibilité vers HTML, en utilisant aucun cadre et avec peu de balises dépréciées, choissisez le XHTML 1.0 Strict.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Si vous voulez utiliser des liens vers des cadres ou des balises de formatage dépréciées, utiliser XHTML 1.0 Transitional.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Enfin, si vous voulez décrire un ensemble de cadre, fenêtre ou frame dans votre document, utiliser XHTML 1.0 Frameset.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Si vous êtes curieux, vous pouvez regarder le fichier qui se situe à l'URL de chaque type de document. Vous pouvez aussi consulter la liste officiel des DOCTYPEs du W3C. Finalement, on appelle "Déclaration du Type de Document" la ligne qui contient le DOCTYPE.

La balise <html>

Après, l'instruction <?xml?> et le type de document, vient la première balise du document XHTML, la balise <html>. Toutes les autres balises du langage XHTML seront imbriquées dans cette balises. Il n'y a qu'une seule et unique balise <html>.

On y place deux attributs : xmlns et xml:lang. Le premier contient l'espace de nom, un URL unique pour le type HTML. Les espaces de nom (namespace) sont des moyens pour utiliser plusieurs langages XML dans un même document. Il existe un namespace pour le HTML, le MathML, le SVG, le XUL, etc. Ensuite, l'attribut xml:lang permet de spécifier la langue par défaut du document. Pour un document en français, on utilise "fr", pour un document rédigé en anglais, "en".

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	
</html>

La balise <head>

La balise unique <head> est imbriquée directement dans la balise html. On y insère les balises qui permettent d'indiquer le titre du document, d'inclure des informations supplémentaires sur le document (mot-clés, descriptions, nom de l'auteur). On y insère aussi les liens vers les feuilles de styles ou les scripts. Toutes les balises dans la balise <head> ne sont pas affichées dans le document.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		
	</head>
</html>

Le titre

La balise <title> </title> permet d'indiquer le titre du document. Il sera généralement affiché dans la barre de titre de la fenêtre (tout en haut de la fenêtre du navigateur). Il est aussi utilisé dans les moteurs de recherche et est donc extrêmement important pour le référencement. Évitez les longs titres avec le nom de votre site sur chacune de vos pages. Essayer de trouver un titre significatif pour chaque document. Il s'agit d'un moyen visuel pour se repérer lors de la navigation et est donc important pour vos visiteurs.

La balise est insérée à l'intérieur de la balise head et est unique.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Tutoriel XHTML: Les bases</title>	
	</head>
</html>

L'encodage des caractères

Après le titre, on peut insérer de la même manière qu'avec l'instruction d'exécution <?xml?>, l'encodage du document XHTML à l'aide de la balise <meta>. On doit aussi inscrire dans cette balise le type mime (multimédias) du document. Pour le XHTML traité comme du XML, on doit écrire application/xhtml+xml. Pour du XHTML traité comme du HTML, on doit choisir text/html. La balise <meta> est une balise seule. On doit donc insérer un / à la fin. Pour l'encodage, il faut être consistant avec ce que l'on a écrit dans l'instruction <?xml encoding="..."?>. La majorité des sites utilisent text/html pour une compatibilité descendante.

	<!-- meta se place dans la balise head -->
	<head>
		<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
	</head>

Tests: UTF-8, ISO-8859-1. Note: l'encodage est envoyé par le serveur Apache à l'aide des extensions .utf8 et .iso88591.

Les métas-informations

Les métas-informations ou les balises <meta> nommées permettent de donner de l'information descriptives supplémentaires sur un document XHTML. Certains moteurs de recherche s'en servent pour référencer les sites tout comme le titre de la page. Les balises <meta> sont imbriquées à l'intérieur de la balise <head>. On utilise les attributs name="" et content="".

Il existe des noms de meta standards largement utilisés tel que "description" pour une courte description, "keywords" pour les mots-clés, "DC.Creator" pour le nom de l'auteur, etc.

Voici un exemple type:

	<!-- Encore une fois dans la balise head -->
	<head>
		<meta name="description" content="Les balises de bases pour la structure d'un document XHTML" />
		<meta name="keywords" content="balise, base, xhtml, structure, document, tag, attribut" />
		<meta name="DC.Creator" content="Yan Morin" />
	</head>

Le corps du document : la partie visible

Finalement, la dernière balise qui compose la structure d'un document HTML vide est la balise <body>. Toute l'information visible, c'est-à-dire le texte, les images, les animations, etc, doit être placée dans cette balise.

La balise <body> est imbriquée à l'intérieur de la balise <html>, sous la balise <head>.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Tutoriel XHTML: Les bases</title>	
	</head>

	<body>
			
	</body>
</html>

Structure de base : résumé

Après avoir générer la structure de base de notre document XHTML, le code devrait ressembler à: 

<?xml version="1.0" encoding="UTF-8"?>
<!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">
	<head>
		<title>Tutoriel XHTML: Les bases</title>	
		<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
		<meta name="description" content="Les balises de bases pour la structure d'un document XHTML" />
		<meta name="keywords" content="balise, base, xhtml, structure, document, tag, attribut" />
		<meta name="DC.Creator" content="Yan Morin" />
	</head>

	<body>
		
	</body>
</html>

Précédent | Suivant

Lire les commentaires | Laisser un commentaire