La structure d'un document

Ce que tu vas apprendre

• Le rôle du doctype, de <html>, de <head> et de <body>.
• Les informations utiles à placer dans l'en-tête de la page.
• Écrire un commentaire et afficher des caractères spéciaux.

Le squelette

Chaque page HTML commence par le même squelette :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gratin dauphinois</title>
  </head>
  <body>
    <h1>Gratin dauphinois</h1>
  </body>
</html>

Chaque ligne a un rôle. Voyons-les de haut en bas.

Le doctype

<!doctype html> est la toute première ligne. Ce n'est pas un élément, mais une déclaration qui dit au navigateur : « ce document est du HTML moderne ».

Sans elle, le navigateur passe dans un mode de compatibilité pour les très vieilles pages, et l'affichage peut changer de façon surprenante. Écris-la toujours.

L'élément html

<html> contient tout le reste de la page. On l'appelle l'élément racine.

Son attribut lang donne la langue du contenu. C'est important : les lecteurs d'écran l'utilisent pour choisir la bonne prononciation, et les navigateurs pour proposer une traduction. Pour du français, écris lang="fr".

Le head : les informations sur la page

L'élément <head> (l'en-tête) regroupe les informations sur la page. Rien de ce qu'il contient ne s'affiche dans la page elle-même.

Le titre <title> compte beaucoup. Il apparaît dans l'onglet, dans les favoris et dans les résultats d'un moteur de recherche. Donne à chaque page un titre différent et précis.

L'encodage des caractères

L'encodage décide comment les lettres sont stockées dans le fichier. Avec charset="utf-8", tu peux écrire sans souci les accents, les cédilles et le symbole euro.

Mets cette balise en premier dans le <head>. Enregistre aussi ton fichier en UTF-8, ce que ton éditeur fait en général par défaut. Si tu vois des symboles bizarres à la place de « é », c'est un problème d'encodage.

Le viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Sans cette ligne, un téléphone affiche la page comme sur un grand écran, puis la réduit. Avec elle, la page prend la largeur réelle de l'appareil. Tu en as besoin pour un site qui s'adapte aux mobiles.

Le body : le contenu visible

<body> contient tout ce qui s'affiche : titres, textes, images, liens, formulaires. Il n'y en a qu'un par page.

Les chapitres suivants remplissent ce <body>. Tout ce que tu voudras montrer à l'utilisateur y prendra place.

Les commentaires

Un commentaire est une note pour toi ou pour ton équipe. Le navigateur l'ignore.

<!-- À faire : ajouter la liste des ingrédients -->
<p>Une recette de saison.</p>

Il s'écrit entre <!-- et -->. Ne mets jamais de secret dans un commentaire : n'importe qui peut lire le code source d'une page.

Les caractères spéciaux

Les signes < et > servent à écrire les balises. Pour les afficher comme texte, utilise une entité : un code qui commence par & et finit par ;.

<p>Pour un titre, écris &lt;h1&gt;Mon titre&lt;/h1&gt;.</p>

Les espaces ne comptent pas

Le navigateur réduit toute suite d'espaces et de retours à la ligne à un seul espace. Écrire dix retours à la ligne dans un paragraphe n'ajoute aucun vide.

Cela te laisse libre d'indenter ton code pour qu'il reste lisible. Décale d'un cran (deux espaces) chaque élément imbriqué, comme dans l'exemple du début.

À retenir

• Une page commence par <!doctype html>, suivi de <html lang="fr"> qui contient <head> et <body>.
• Le <head> décrit la page (titre, encodage, viewport) sans rien afficher.
• <meta charset="utf-8"> règle l'encodage, et le viewport adapte la page aux mobiles.
• Le <body> contient tout le contenu visible.
• Un commentaire s'écrit <!-- ... -->, et les entités comme < affichent les signes réservés.