### Document minimum

Un document HTML minimum et bien formé contient les éléments montrés dans l'exemple suivant.

Exemple : document minimum bien formé
<!DOCTYPE html> <html lang="fr"> <head> <title>Document minimum</title> </head> <body> </body> </html>

Quand on teste le code, il semble que rien ne soit affiché par le navigateur.
En réalité le navigateur a affiché le seul élément d'information textuelle qu'il a : le titre du document. Ce titre n'est pas affiché dans la fenêtre, mais dans la barre de titre (ou dans l'onglet) du navigateur.
Si la fenêtre est vide, c'est normal car le navigateur fait le rendu de ce qui est contenu dans l'élément body. Comme celui-ci est vide, le navigateur n'a rien à afficher.

structure d'un document

On voit que la structure d'un document HTML est la suivante :

- une déclaration de doctype
- un élément html qui contient
  - un élément head avec
    - un élément title
  - un élément body

C'est la structure minimum d'un document HTML bien formé.

### La racine avec <html>

L'élément html est un élément spécial dans le sens où il contient tous les autres éléments du document. Ce type d'élément est généralement appelé élément racine dans les langages de balisage (SGML, XML, etc). Cette dénomination provient de la représentation possible sous la forme d'un arbre inversé des documents à base de balisage. Pour HTML, ce graphe est appelé l'arbre DOM (Document Object Model).

arbre et vocabulaire associé

Les relations des noeuds (et des feuilles) entre eux ont aussi un vocabulaire bien défini :

relations et vocabulaire associé

Le W3C recommande de spécifier la langue dans laquelle est écrit le document avec un attribut `lang`. Cette précision est surtout utile pour les programmes de lecture utilisés par les malvoyants.

### L'en-tête avec <head>

L'en-tête d'un document HTML n'est pas la même chose que l'en-tête d'un document papier. L'en-tête d'un document HTML est défini avec la balise head et contient des métadonnées : des informations sur les données du document (le contenu à proprement parler) et éventuellement sur la manière de traiter ce contenu.

L'élément head peut contenir les éléments suivants :

﻿

Élément | Nombre | Description
title | 1 | Titre du document
meta | 0 ou plus | Métadonnées
link | 0 ou plus | Liaisons ou relations vers des ressources externes (par exemple feuilles de style CSS)
style | 0 ou plus | Règles de style CSS directement écrites le document
script | 0 ou plus | Instructions de script (JavaScript, VBScript) directement écrites le document
base | 0 ou 1 | URL de base par défaut pour tous les liens du document

Les éléments permettant de définir ses métadonnées ne peuvent pas contenir d'autres éléments.

Le contenu de l'en-tête n'est jamais affiché par le navigateur.

Remarque : on peut toutefois forcer l'affichage de ces éléments en utilisant des propriétés de style CSS. C'est utile uniquement comme ici dans un but pédagogique et ça ne doit surtout pas être fait dans un site réel.

Exemple : affichage de tous les éléments
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>A ne pas faire</title> <style> * { display: block; border: 1px solid red; padding: 5px; margin: 5px; } </style> </head> <body> Tous les éléments sont affichés car leur mode d'affichage est forcé en bloc. De plus une bordure rouge permet de se rendre compte visuellement des imbrications. </body> </html>

Le corps d'un document HTML est défini avec la balise body et contient tout ce qui sera traité et rendu par le navigateur dans la partie de sa fenêtre réservée à l'affichage (appelée la zone client). Les chapitres suivants sont tous consacrés à la façon de remplir cet élément.

Pour le moment, nous allons finir ce chapitre en examinant les principaux éléments que l'on trouve dans l'en-tête du document.