# La structure HTML de base d'une page web

Une page web contient une structure de base composée des éléments suivants :

- La déclaration `<!DOCTYPE>`.
- La balise `<html>`.
- La balise `<head>`.
- La balise `<body>`.

## 1 - La déclaration

### 1.1 - Rôle de la déclaration

> « Sans déclaration de type de document (Doctype ou Doctype Declaration en anglais, NdT), votre document HTML n'est tout simplement pas valide et la plupart des navigateurs qui vont visualiser votre document vont passer en mode « quirk », c'est-à-dire qu'ils vont considérer que vous faites absolument n'importe quoi, et en retour vont n'en faire qu'à leur tête. Vous aurez beau être le plus grand champion du HTML que la Terre ait jamais porté, votre HTML aura beau être impeccable et votre CSS parfaite, s'il n'y a pas une déclaration de document, ou si ce n'est pas la bonne, vos pages web pourraient bien finir par ressembler à des pages construites par un bébé gibbon myope et borgne atteint de troubles de l'apprentissage. »
> Patrick Griffiths (Extrait du site Pompage).

La déclaration indique principalement au navigateur et à tout programme pouvant lire les fichiers HTML la version du langage HTML que l'on utilise. En effet, au fil du temps, le W3C a fait évoluer ce langage en faisant apparaître de nouvelles balises, d'autres devenant obsolètes (deprecated).
La déclaration doit se placer en début de document (à la 1re ligne).
Exemple de déclaration :
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`.
Dans cette déclaration, l'élément qui indique la version du langage HTML utilisé est `XHTML 1.0 Strict`.
`Strict` signifie que le code de la page respecte scrupuleusement la norme XTML 1.0.
L'adresse web qui suit, pointe sur une page qui contient cette norme. Le navigateur ou le programme qui lit le fichier peut l'utiliser pour comprendre le code de la page qu'il va devoir interpréter.

### 1.2 - Exemples de déclaration

`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">`
`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`
`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`
`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">`

Dans ces déclarations, les termes `Transitional` et `Frameset` sont utilisés.
`Transitional` signifie que l'on peut encore utiliser les balises devenues obsolètes dans la version HTML précisée.
`Framset` est à utiliser si la page contient des frames (aujourd'hui il est vivement déconseillé d'utiliser des frames).

### 1.3 - La dernière version du HTML : le HTML 5

Toutes les déclarations citées plus haut font référence aux anciennes versions du langage HTML.
Elles ne sont plus vraiment utilisées, mais vous pouvez encore les rencontrer, ce qui sous-entends qu'avant de modifier un fichier HTML, il faut d'abord vérifier la déclaration pour utiliser les balises correspondant à la version de ce langage utilisé pour cette page.
Pour rappel historique, voici les principales versions du HTML qui se sont succédé :

- HTML 1.
- HTML 2.
- HTML 3.
- HTML 4.
- XHTML 1 : la version 2 du XHTML ne verra jamais le jour.
- HTML 5.

La toute dernière version est donc la 5, mais dans les faits, comme ce langage est devenu un standard, les futures évolutions ne seront plus numérotées. On parle maintenant du HTML sans mentionner sa version et la déclaration est maintenant réduite à sa plus simple expression.
En conséquence, si vous voulez utiliser la dernière version de ce langage (ce que je vous recommande), la déclaration est la suivante :
`<! DOCTYPE HTML>`.

La référence officielle de ce langage (syntaxe et lexique), dont la rédaction a été confiée à la fondation Mozilla (MDN) par les principaux acteurs de l'informatique, se trouve ici :

- Page d'accueil du HTML
- Page des balises HTML

NB. Toutes les balises qui seront mentionnées et utilisées dans ces pages sont toutes validées par le HTML 5.

## 2 - La balise `<html>`

La balise ouvrante `<html>` suit la déclaration. Elle indique le début du document HTML et englobe tous les éléments du code. La balise fermante `</html>` doit donc se placer en toute fin du document (dernière ligne).

Comme indiqué dans la documentation officielle, la balise HTML doit contenir l'attribut obligatoire `lang` qui indique en quelle langue le texte est écrit.
Si notre page est en français, on écrira donc : `<html lang="fr">…</html>`

## 3 - La balise `<head>`

La balise `<head>` se place dans la balise `<html>`. Elle correspond à l'entête du document.
Toutes les informations contenues dans `<head>` ne seront pas visibles dans la page du navigateur.

Le rôle de cette balise consiste principalement :

- À donner des informations utiles aux moteurs de recherche pour optimiser le référencement naturel de la page (SEO).
- À donner des informations utiles au navigateur pour afficher le contenu de la page.

Voici les principales balises pour optimiser le référencement à placer dans la balise `<head>`

- `<title>`Titre de la fenêtre correspondant au contenu de la page `</title>` : placer un à trois mots clés dans le titre.
- `<meta name="description" value="Texte de 165 caractères maximum décrivant le contenu de la page" />` : répéter dans cette phrase le(s) mot(s) clé(s) utilisé(s) dans la balise `<title>`.
- `<meta name="keywords" value="liste des mots clés décrivant le contenu de la page" />` : les moteurs de recherche tiennent moins compte de cette balise pour optimiser le référencement, car elle a été souvent utilisée à mauvais escient.

Pour rappel, bien que nécessaires, ces balises ne sont pas pour autant suffisantes pour optimiser le référencement d'une page dans les moteurs de recherche. Les mots clés choisis devront être répétés dans d'autres balises contenues dans la balise `<body>` comme les headers, les liens, les images, etc.

Parmi les balises utiles au navigateur pour afficher le contenu de la page, la balise `<meta charset="utf-8" />` permet d'afficher correctement les caractères constituant les alphabets des différentes langues. Par exemple, pour le français, les caractères accentués peuvent poser des problèmes d'affichage et cette balise permet de les éviter.
Vous trouverez plus de précision en visitant la page Les caractères en HTML.

## 4 - La balise `<body>`

Cette balise se place dans la balise `<html>` et à la suite de la balise `<head>`. Elle correspond au corps de la page, c'est-à-dire au contenu qui sera affiché par le navigateur. Tout élément devant s'afficher dans une page web doit donc forcément être placé à l'intérieur de la balise `<body>`.

## 5 - Organisation de ces balises

Voici un exemple de cette structure de base d'une page `<html>` :