Séparer les métadonnées du contenu

Une page HTML doit fournir au navigateur des informations de configuration tout en réservant une zone distincte au contenu visible. Si ces deux rôles sont mélangés ou si le document ne comporte pas de titre, la page est moins claire à interpréter et à consulter. Vous allez compléter le fichier du Festival des Rives en séparant ces informations dès le début.

Vous avez déjà déclaré un document HTML5 et précisé sa langue principale dans la leçon précédente. Conservez ces éléments et les conventions d’écriture du projet : balises en minuscules et indentation de quatre espaces. Dans cette leçon, vous allez organiser ce qui se trouve entre l’élément racine et sa fermeture, sans encore rédiger la présentation du festival.

Séparer la configuration et le contenu

L’élément head regroupe les métadonnées, c’est-à-dire les informations qui décrivent le document ou indiquent au navigateur comment le traiter. Elles ne constituent pas le contenu principal affiché dans la page. L’élément body reçoit, lui, le contenu de la page destiné aux visiteurs ; il accueillera plus tard le programme et les informations pratiques du festival.

Ces deux éléments se placent à l’intérieur de html, dans cet ordre : d’abord head, puis body. Chacun possède une balise ouvrante et une balise fermante. Veillez à placer chaque information dans la bonne zone : par exemple, le titre du document appartient à head, tandis que le futur contenu du festival appartiendra à body.

Décrire le document dans head

La métadonnée charset indique l’encodage des caractères du document. Utilisez utf-8 afin que les caractères français, comme les accents de « Rives », soient interprétés correctement. L’élément title définit le titre du document : choisissez un libellé qui identifie le festival et précise qu’il s’agit de son programme.

Le titre est placé entre les balises ouvrante et fermante title, à l’intérieur de head. Il décrit la page plutôt qu’une section de son contenu. La leçon consacrée à l’ouverture dans un navigateur vous montrera comment vérifier le titre dans l’onglet ; ici, retenez surtout sa place dans le document et la nécessité de le formuler sans ambiguïté.

Compléter le fichier du projet

Voici l’état complet de index.html à la fin de cette étape. La métadonnée d’affichage viewport est conservée dans le squelette de référence pour adapter la largeur de la page aux appareils mobiles. La feuille style.css reste liée au document, conformément au contrat du projet.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Festival des Rives — Programme</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="festival-page">
    </body>
</html>

La classe festival-page est déjà présente sur body pour identifier le conteneur général prévu par le projet. Elle doit avoir une règle dans la feuille de style : sans cette règle, la classe n’a aucun effet visuel. Le fichier ci-dessous établit cette base en utilisant les variables définies par le contrat, sans ajouter de classe ni de variable.

:root {
    --festival-couleur-texte: #202124;
    --festival-couleur-fond: #ffffff;
    --festival-couleur-accent: #235347;
    --festival-espacement: 1rem;
    --festival-espacement-large: 2rem;
    --festival-rayon: 0.5rem;
    --festival-police: Arial, sans-serif;
    --festival-taille-texte: 1rem;
}

.festival-page {
    color: var(--festival-couleur-texte);
    background-color: var(--festival-couleur-fond);
    font-family: var(--festival-police);
    font-size: var(--festival-taille-texte);
}

Pour contrôler votre structure, vérifiez que head et body sont tous deux à l’intérieur de html, et qu’ils ne sont pas imbriqués l’un dans l’autre. Vérifiez ensuite que l’encodage, le titre et le lien vers la feuille de style se trouvent dans head. Le body peut rester vide à ce stade : vous ajouterez le contenu du festival dans les leçons suivantes.

À retenir

• Placez les métadonnées et le titre du document dans head.
• Placez le contenu destiné aux visiteurs dans body.
• Déclarez l’encodage avec charset="utf-8".
• Conservez le lien vers style.css et la règle CSS de base associée à festival-page.

Dans la prochaine leçon, vous ouvrirez ce fichier dans un navigateur pour vérifier concrètement le document et son titre.