Explication du code minimal d'un document HTML

Si on vous a dit "on verra plus tard", alors ce jour est arrivé !

Article publié le 04/08/2021, dernière mise à jour le 19/09/2023

Il n'est pas rare que lorsque vous commenciez votre apprentissage du web (en général HTML et CSS) on vous épargne la compréhension du fichier HTML minimal nécessaire au navigateur pour l'interpréter comme étant un document web.

Et bien aujourd'hui c'est le moment de plonger ensemble dans ces quelques lignes et de comprendre leur utilité, leur fonctionnement et leur impact. Pour commencer, prenons notre fichier minimal de référence :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML Example document</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="favicon.ico"/>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Le doctype

La première chose à savoir, c'est que le format HTML est en réalité une spécification basée sur un autre langage appelé XML :

<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

Le XML est un langage à balises extensible, ce qui signifie que vous pouvez créer autant de balises que vous voulez pour les besoins de votre application (ici un système de gestion de notes).

Mais pour vérifier que le format des données écrites dans le fichier correspond bien à celui attendu par l'application, il est nécessaire de lui accoler un schéma de référence, ce format on l'appelle DTD pour "Document Type Definition".

Son but sera par exemple d'indiquer que chaque devra être composé d'exactement un expéditeur , un receveur , etc...

Et comme vous le voyez, le format pour relier un document XML à son fichier de DTD se fait avec la balise DOCTYPE, comme dans notre document HTML.

Dans notre page web, le "Document Type Definition" indique simplement que le navigateur doit se référer au schéma de la dernière version HTML en vigueur afin de pouvoir confirmer que toutes les balises utilisées sont valides et correctement utilisées.

L'élément racine

<html lang="en">
...
</html>

Comme vu précédemment, chaque document HTML doit être un document XML valide, et l'une des caractéristiques d'un document XML est d'avoir un élément racine (et un seul).

C'est le point d'entrée du document, celui par lequel l'interpréteur va commencer à parcourir le document, en l’occurrence pour une page web celui-ci doit s'appeler , et il peut contenir certains attributs, dont le principal reste la langue du document.

L'en-tête

<head>
...
</head>

L'en-tête d'une page web a un rôle très particulier car elle contient toutes les informations et les fichiers qui devront être chargés en premier.

Cela signifie que si vous incluez des fichiers trop lourds directement dans l'en-tête du document, alors votre page ne commencera à s'afficher que lorsque toute l'en-tête aura été chargée, et pas avant.

C'est dans l'en-tête que l'on va retrouver toutes les métadonnées de la page :

Les méta-données

Les "meta-data" (ou métadonnées) sont des données qui décrivent le document lui-même. Par exemple dans les métadonnées d'un document texte vous pourriez retrouver le nom du fichier, le nom de l'auteur, la date de création, etc...

Beaucoup d'informations qui ne vous seront pas forcément utiles à la lecture du fichier, mais qui pourront l'être pour d'autres usages.

Et bien pour un document web, c'est la même chose. La première métadonnée que l'on va retrouver est son titre :

<title>HTML Example document</title>

D'ailleurs vous pouvez voir qu'il est chargé avant tout le reste, car il apparait dans le titre de l'onglet navigateur avant que la page n'apparaisse

Mais aussi d'autres métadonnées comme l'encodage des caractères, la taille et le comportement du viewport et pleins d'autres choses :

...
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
...

Il existe des dizaines de métadonnées différentes, dont certaines pour l'affichage de vos liens sur les réseaux sociaux par exemple :

Comment personnaliser le partage de votre site sur les réseaux sociaux avec OpenGraph - Nicolas Brondin-Bernard

À noter que les métadonnées jouent un rôle incontournable dans le référencement naturel (SEO), retrouvez toutes les autres métadonnées dans la documentation officielle du Mozilla Developer Network !

Les liens

En parallère du chargement des métadonnées, les balises et