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 <note> devra être composé d'exactement un expéditeur <from>, un receveur <to>, 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 <html>, 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
Quelle frustration lorsque vous venez de finaliser votre site sur lequel vous avez travaillé pendant des semaines, et qu’au moment de partager le lien sur les réseaux sociaux, rien ne s’affiche à part le titre du site, sans image, sans description...

À 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 <link> et <script> seront interprétées et les fichiers seront téléchargés et inclus dans la page par le navigateur.

...
<link rel="icon" href="favicon.ico"/>
<link rel="stylesheet" href="style.css"/>
<link rel="manifest" href="manifest.json"/>
<script type="text/javascript" src="head.js"></script>
...

Certains fichiers modifierons le comportement de la page (JS et CSS) tandis que d'autres seront simplement utilisés par le navigateur (favicon, manifeste,...).

Le manifeste est par exemple utilisé pour déclarer une "Progressive Web App" (PWA), je vous invite à lire cet article si le sujet vous intéresse.

Le corps

<body>
...
</body>

Finalement, la balise <body> contient l'entièreté du contenu affichable de la page et sera chargé une fois que le chargement de l'en-tête sera terminé.

Et si vous voulez aller plus loin dans la compréhension du fonctionnement du web, je vous invite à lire mon article intitulé "Comment fonctionne un navigateur web ?".

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

Les articles les plus populaires du blog

Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !

Voir la sélection 🚀

Recevez les articles de la semaine par e-mail pour ne rien manquer !

S'abonner à la newsletter 📧

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par Bailey Zindel sur Unsplash