2.7 Document HTML valide

18 octobre 2018

Boilerplate *

Jusqu’à présent, nous examinions des extraits isolés de code HTML. Mais un document HTML (ou une page Web, cela signifie la même chose) nécessite une structure spécifique pour être valide. Pourquoi nous intéressons-nous à la validation d’un document HTML?

correct : un document valide est correctement affiché par le navigateur
débogage : un code HTML invalide peut provoquer des bogues difficiles à cibler
maintenance : un document valide est plus facile à mettre à jour ultérieurement, même par quelqu’un d’autre

Doctype

La première information à fournir est le type de document HTML que nous écrivons: le Doctype.

Considérez le doctype comme la version d’une voiture au fil des années.

Auparavant, plusieurs versions de HTML coexistaient (XHTML et HTML 4.01 étaient des normes concurrentes). De nos jours, HTML 5 est la norme.

Pour indiquer au navigateur que le document HTML est un HTML 5, commencez votre document par la ligne suivante :

<!DOCTYPE html>

C’est tout. Il suffit de le régler et oublier.

Vous vous demandez peut-être pourquoi ce doctype HTML 5 ne mentionne pas le nombre «5». Le W3C a estimé que les définitions de doctype précédentes étaient trop déroutantes et a profité de l’occasion pour le simplifier en supprimant toute mention de la version HTML.

L’élément <html>

En dehors de la ligne doctype, tout votre document HTML doit être placé dans un élément <html> :

<!DOCTYPE html>
<html>
<!-- Le reste du code html sera contenu entre ces deux balises -->
</html>

<html> est techniquement l’ancêtre de tous les éléments HTML.

<head>

De la même manière que les attributs portent des informations supplémentaires pour un élément HTML, l’élément <head> contient des informations supplémentaires pour l’ensemble de la page Web.

Par exemple, le titre de la page (affiché dans l’onglet) se trouve dans le <head> :

<head>
  <title>Mon blog fabuleux</title>
</head>

D’autres éléments HTML peuvent apparaître dans le <head>, et uniquement dans le <head> :

<link>
<meta>
<style>

<body>

Bien que <head> ne contienne que des métadonnées qui ne doivent être affichées nulle part (à l’exception du <title>), l’élément <body> est l’endroit où nous écrivons tout notre contenu. Tout ce qui se trouve à l’intérieur du <body> sera affiché dans la fenêtre du navigateur.

Un document HTML complet et valide

En combinant toutes ces exigences, nous pouvons écrire un document HTML simple et valide :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ex-Nihilo-descloussurlesnuages</title>
    <meta name="description" content="Un simple tuto HTML et CSS">
  </head>
  <body>
    <p>Bonjour tout le monde !</p>
  </body>
</html>

Si vous voyez cet exemple dans votre navigateur, vous verrez ceci :

“Ex-Nihilo/descloussurlesnuages” est écrit sur l’onglet du navigateur
“Bonjour tout le monde !” Est le seul texte affiché dans la fenêtre, car c’est le seul contenu du <body>

Le W3C fournit un service de validation de balisage permettant de vérifier si un document HTML contient des erreurs ou des avertissements.

* Le terme “boilerplate” était initialement utilisé par les juristes pour les contrats ou les courriers types qu’ils pouvaient rédiger et qui reprenaient toujours la même structure et un contenu proche qu’il suffisait de personnaliser.