La Structure d'un Document HTML

Les documents HTML sont définis par une balise d'ouverture HTML et sa balise de fermeture associée, qui indiquent au navigateur Web qu'il a affaire à un fichier HTML. Les balises d'ouverture et de fermeture sont respectivement <html> et </html>. Le même système de balises est utilisé tout au long du document et il existe un grand nombre de balises avec des fonctions diverses.

Un document Web est toujours composé de deux parties : l'en-tête, dans laquelle se trouve divers renseignements qui ne sont pas affichés par le navigateur Web et le corps qui comprend le texte, les images et autres informations essentielles de votre document.

L'En-Tête d'un Document HTML

L'en-tête d'un fichier HTML est défini par la balise <head>. Elle inclut des informations sur le document HTML telles qu'un titre, une description, des mots-clés, le nom de l'auteur ou des liens vers d'autres fichiers (scripts Javascript, feuilles de styles).

Le Titre

Il vous est possible de donner un titre à votre document : celui-ci apparaîtra dans le bandeau supérieur de la fenêtre de votre navigateur ainsi que dans les résultats des moteurs de recherche (mais pas dans le document). La balise HTML de titre est <title>, à insérer dans l'en-tête de votre page Web.

Les Meta Tags

Les Meta Tags permettent de décrire le contenu de la page afin que les moteurs de recherche la référencent correctement et plus facilement. La balise HTML d'un Meta Tag est <meta/> qui ne possède pas de balise de fermeture; à la place, elle se termine par /> qui tient lieu de fermeture. La balise de Meta Tag s'utilise avec les attributs name et content qui déterminent les propriété du document à définir :

<meta name="xxx"	content="xxx" />
author	Nom de l'auteur
copyright	Copyright du document
date	Date de création ou mise à jour du document
description	Courte description du document (200 caractères maximum)
generator	Le logiciel de création de pages Web utilisé (Vim, Notepad, Dreamweaver, Frontpage...)
keywords	Mots-clés séparés par une virgule (500 caractères maximum)
language	Langage du document (fr-FR pour français, en-EN pour anglais)
owner	Adresse Email de l'auteur ou du webmaster
robots	INDEX : la page sera indexée par le robot NOINDEX : la page ne sera pas indexée FOLLOW : les liens contenus dans la page seront indexés NOFOLLOW : les liens contenus dans la page ne seront pas indexés

Les Meta Tags sont optionnels mais certains sont utiles pour le référencement de vos pages par le moteurs de recherche, en particulier la description et les mots-clés.

Il aussi possible d'utiliser la balise <meta> avec les attributs http-equiv et content pour définir l'alphabet de la langue utilisée sur votre page Web (charset) ou bien pour forcer l'actualisation automatique de la page :

pour les pages en français (par exemple, les pages en grec utilisent iso-8859-7 et les pages en russe utilisent iso-8859-5).

permet de forcer le navigateur Web à réactualiser la page Web toutes les 60 secondes.

Le Corps d'un Document HTML

Le corps du texte est défini par la balise <body>. C'est la partie de votre fichier HTML où vous devez insérer le texte, les images, les liens et autres informations que vous souhaitez voir apparaître sur votre page Web. Toutefois, il vous sera nécessaire de coder avec des balises HTML ces informations pour qu'elles s'affichent comme vous le désirez. En effet, le HTML ne prend pas en compte les retours à la ligne, les sauts de ligne et les espaces multiples :

<body>
Cet exemple montre comment un navigateur Web traite du texte que vous ne codez pas avec des balises HTML. Vous pouvez remarquer que les espaces ne sont pas pris en compte.

Le navigateur ignore aussi les sauts de page.
</body>

Cet exemple montre comment un navigateur Web traite du texte que vous ne codez pas avec des balises HTML. Vous pouvez remarquer que les espaces ne sont pas pris en compte. Le navigateur ignore aussi les sauts de page.

Le Doctype (ou déclaration du type de document)

Le Doctype permet d'indiquer au navigateur Web dans quel type de HTML votre page a été écrite. Ainsi le navigateur sait que l'auteur de la page connaît les standards Web et qu'il estime que sa page s'y conforme. Dans ce cas, lorsque le navigateur Web parcours votre page, il applique les standards Web (il passe en mode strict).

Si votre document HTML ne contient pas de Doctype, le navigateur suppose que les standards Web ne sont pas applicables à la page. Dans ce cas, l'apparence de votre site peut s'en trouver modifiée.

Le Doctype a la forme suivante :

<!DOCTYPE HTML PUBLIC "version_du_html" "URL_du_DTD">

version_du_HTML est l'identificateur de la version du HTML utilisé
URL_du_DTD est l'URL du Document Type Definition, un document qui sert de définition des éléments et des règles de cette version de HTML.

Puisqu'il existe différentes versions de HTML, il existe plusieurs Doctype :

Version du HTML	version_du_HTML	URL_du_DTD
HTML 2.0	-//IETF//DTD HTML 2.0//EN	pas d'URL associée
HTML 3.2	-//W3C//DTD HTML 3.2 Final//EN	pas d'URL associée
HTML 4.01 - Strict	-//W3C//DTD HTML 4.01//EN	http://www.w3.org/TR/html4/strict.dtd
HTML 4.01 - Transitional	-//W3C//DTD HTML 4.01 Transitional//EN	http://www.w3.org/TR/html4/loose.dtd
HTML 4.01 - Frameset	-//W3C//DTD HTML 4.01 Frameset//EN	http://www.w3.org/TR/html4/frameset.dtd
XHTML 1.0 - Strict	-//W3C//DTD XHTML 1.0 Strict//EN"	http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
XHTML 1.0 - Transitional	-//W3C//DTD XHTML 1.0 Transitional//EN	http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
XHTML 1.0 - Frameset	-//W3C//DTD XHTML 1.0 Frameset//EN	http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
XHTML 1.1	-//W3C//DTD XHTML 1.1//EN	http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

Si vous suivez les conseils donnés dans ce guide HTML, vous pourrez coder vos pages Web avec du XHTML 1.1 valide.

Exemple de la Structure de Base d'un Fichier HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Le titre de la page Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description de la page Web"/>
</head>
<body>
Le contenu de la page Web
</body>
</html>

<< Table des Matières

Les Caractères Spéciaux >>