Complément des cours en présentiel © Éric NÊME

La structure HTML de base d'une page web

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

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é :

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 :

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 :

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

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> :
Structure d'une page HTML