Le document html minimal
Toutes vos pages web devront présenter la structure minimale suivante :
Le rôle de chacune des lignes ci-dessus est expliqué dans la suite de cette page.
Le doctype
La première ligne du document est le doctype :
Le mot doctype peut être écrit en majuscules ou en minuscules. Il en ira de même pour les balises html, mais nous les écrirons systématiquement en minuscules.
Le rôle du doctype (déclaration de type de document) est de déclarer à votre navigateur quel type de document html il va lire. En html5, le doctype est simple (c'est celui qui est présenté ci-dessus). Mais par exemple en html 4.01 strict, la déclaration de doctype est la suivante :
Le DTD (Déclaration de Type de Document, déclaration réalisée par la donnée du doctype comme indiqué ci-dessus) sert à indiquer à quelles règles d'écriture obéit le code d'une page HTML ou XHTML. Ces règles sont contenues dans les Définitions de Type de Document, hébergées sur le site du W3C. Par exemple, vous trouverez la définition du doctype 4.01 strict sur cette page .
La balise html
La seconde ligne est constituée de la balise ouvrante html
Cette balise est complétée par la toute dernière ligne de la page : la balise fermante html
Ces deux balises délimitent le code html (code écrit en respectant les règles définies par le doctype déclaré en première ligne). Dans une page html, pour parler de l'élément html, on parlera souvent de l'élément racine du document.
On ajoutera la langue utilisée dans nos pages comme attribut de la balise html :
L'en-tête du document
L'en-tête du document est délimité par la balise ouvrante head et la balise fermante correspondante :
L'en-tête sert à donner des renseignements sur le document (des méta-informations).
title
Le premier renseignement contenu dans l'en-tête est le titre (title) donné à la page.
Ce titre ne s'affiche pas dans la page. Avec firefox par exemple, il est affiché dans l'onglet correspondant à la page (au-dessus de l'espace dans lequel l'adresse de la page est inscrite). Vous pouvez repérer sur la page que vous êtes en train de lire le titre : "doc min".
Vous pouvez vérifier que "doc min" est bien ce qui est inscrit entre les balises <title> et </title>
du code de cette page en faisant un clic droit dans la page et en sélectionnant "code source de la page".
charset
Un autre renseignement important est l'encodage utilisé pour le document.
Il est important de remarquer qu'il n'y a pas de balise de fermeture correspondant à celle-ci. On parlera de balise autofermante pour ce type de balise. Elles peuvent d'ailleurs être écrites comme suit pour insister sur cette autofermeture :
Lorsqu'on écrit un document sous Linux, en général par défaut les éditeurs de texte sont réglés de façon à coder en utf-8 et le charset à indiquer sera utf-8. Sur un autre OS moins respectueux des normes (tout particulièrement l'OS de microsoft, windows), il faudra parfois veiller à régler son éditeur pour coder en utf-8.
Pour comprendre l'utilité de cette
indication du charset d'encodage, avec
ce lien
vous ouvrez une page écrite avec l'encodage utf-8 et la meta balise charset renseignée.
Avec ce ce lien,
vous ouvrez une copie de ce fichier, dans lequel on a simplement effacé la ligne concernant le charset.
Et avec ce ce lien,
vous ouvrez une copie de ce fichier, dans lequel on a modifié la ligne concernant le charset
(en déclarant charset="latin1").Vous devriez constater un problème d'affichage pour les lettres accentuées.
Vous pouvez observer les différences dans le code de chacune de ces pages en faisant un clic droit dans la page et en sélectionnant "code source de la page"
dans le menu qui s'ouvre.
Comme le montre les deux liens précédents, préciser l'encodage du texte sert à signaler au navigateur quel est le code utilisé pour les lettres. Si l'on ne signale pas cela, il peut chercher à lire les lettres avec un autre code : on obtient donc les caractères dont le codage est celui de nos lettres accentuées dans cet autre code, d'où les problèmes avec les lettres accentuées (elles n'ont pas le même code en latin-1 et en utf-8).
Vous pouvez comparer cela à une personne qui lit l'alphabet : si on lui dit qu'il doit le lire en français alors
que les personnes dans la salle sont de langue anglaise,
ces personnes n'y comprendront rien. Il faut indiquer la bonne langue
au lecteur pour que les auditeurs comprennent qu'il s'agit simplement d'une lecture de l'alphabet.
author
On peut ajouter d'autres types de méta-renseignement, par exemple l'auteur de la page :
mots clefs
Des mots clefs (qui pourront notamment être utiles aux moteurs de recherche) associés à la page peuvent aussi être indiqués.
Le corps du document
C'est entre les balises d'ouverture et de femeture <body> et </body> que l'on inscrira le contenu de la page.
Le contenu de l'en-tête n'est pas visible dans le navigateur, seul le contenu du corps (élément body) est visible lorsqu'on ouvre la page avec un navigateur.