Construire le squelette des zones de la page

Une page peut contenir tous les bons textes et rester difficile à parcourir si ses zones ne sont pas organisées. Pour la page de l’atelier de jardinage, vous allez poser un squelette lisible : l’identité de l’atelier en haut, les informations pratiques au centre et le contact à portée de regard. Cette structure servira de base à la mise en forme détaillée des cartes dans la prochaine leçon.

Commencez par la hiérarchie du contenu

Avant de choisir des règles CSS, répartissez le contenu selon son rôle. L’en-tête identifie l’atelier et donne accès à la navigation. La partie principale rassemble les horaires et les conseils, tandis que le contact forme une zone distincte, facile à repérer. Cette hiérarchie aide les visiteurs à comprendre où chercher chaque information, même lorsque les styles sont désactivés.

Utilisez des éléments HTML dont le rôle correspond au contenu : header pour l’en-tête, nav pour la navigation, main pour le contenu principal, section pour les horaires et les conseils, et aside pour le contact complémentaire. Chaque section reçoit un titre de niveau cohérent. Les éléments sémantiques ne créent pas la mise en page à eux seuls ; ils rendent la structure compréhensible et fournissent des sélecteurs CSS stables.

Attribuez une stratégie à chaque zone

Choisissez l’outil à partir de la relation entre les éléments. La navigation est une rangée d’éléments à aligner : Flexbox convient à cette organisation unidimensionnelle. La structure générale doit, elle, placer plusieurs zones sur des lignes et des colonnes ; Grid convient à ce besoin bidimensionnel. À l’intérieur d’une zone, vous pourrez ensuite conserver un flux simple tant qu’aucune organisation particulière n’est nécessaire.

Construisez le squelette HTML

Le document ci-dessous fournit un exemple complet de contenu, avec des liens de navigation qui pointent vers les sections correspondantes. La classe page porte la grille globale ; les classes site-header, horaires, conseils et contact identifient les zones à placer. Les trois conseils sont d’abord de simples éléments de liste : leur présentation en cartes sera traitée dans une leçon ultérieure.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Atelier Jardin — informations pratiques</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page">
        <header class="site-header">
            <a class="logo" href="#accueil">Atelier Jardin</a>
            <nav class="navigation" aria-label="Navigation principale">
                <a href="#horaires">Horaires</a>
                <a href="#conseils">Conseils</a>
                <a href="#contact">Contact</a>
            </nav>
        </header>

        <main class="contenu">
            <section class="horaires" id="horaires" aria-labelledby="titre-horaires">
                <h1 id="titre-horaires">Préparez votre visite</h1>
                <p>Retrouvez l’équipe et découvrez les gestes utiles au jardin.</p>
                <h2>Horaires de l’atelier</h2>
                <p>Mercredi et samedi, de 9 h à 12 h.</p>
            </section>

            <section class="conseils" id="conseils" aria-labelledby="titre-conseils">
                <h2 id="titre-conseils">Conseils pratiques</h2>
                <ul>
                    <li>Arrosez tôt le matin pour limiter l’évaporation.</li>
                    <li>Choisissez des plantes adaptées à l’exposition du lieu.</li>
                    <li>Ajoutez du compost mûr pour enrichir la terre.</li>
                </ul>
            </section>
        </main>

        <aside class="contact" id="contact" aria-labelledby="titre-contact">
            <h2 id="titre-contact">Nous contacter</h2>
            <p>Une question avant votre visite ? Écrivez à l’équipe.</p>
            <p><a href="mailto:[email protected]">[email protected]</a></p>
        </aside>
    </div>
</body>
</html>

Les intitulés et les identifiants sont cohérents : un lien comme #horaires mène à l’élément qui porte id="horaires". L’en-tête contient uniquement l’identité et la navigation, alors que main regroupe les informations centrales. Le contact reste à l’extérieur de main parce qu’il accompagne la page sans faire partie du parcours principal de lecture.

Reliez les zones dans la feuille unique

La feuille style.css définit d’abord des variables de couleur et d’espacement, puis applique Grid au conteneur qui réunit les grandes zones. La navigation reçoit son propre conteneur Flexbox : cette organisation locale ne remplace pas la grille générale. Pour garder le premier résultat facile à vérifier, les styles décoratifs sont limités et aucune règle responsive n’est ajoutée dans cette étape.

:root {
    --couleur-texte: #26342b;
    --couleur-fond: #f3f6ef;
    --couleur-zone: #ffffff;
    --couleur-accent: #28623f;
    --espace-petit: 0.75rem;
    --espace-moyen: 1.5rem;
    --espace-grand: 2rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--couleur-texte);
    background: var(--couleur-fond);
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

a {
    color: var(--couleur-accent);
}

.page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.7fr);
    grid-template-areas:
        "entete entete"
        "principal contact";
    gap: var(--espace-moyen);
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--espace-grand);
}

.site-header {
    grid-area: entete;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-moyen);
    padding: var(--espace-moyen);
    background: var(--couleur-zone);
}

.logo {
    font-weight: bold;
    text-decoration: none;
}

.navigation {
    display: flex;
    gap: var(--espace-moyen);
}

.contenu {
    grid-area: principal;
    display: grid;
    gap: var(--espace-moyen);
}

.horaires,
.conseils,
.contact {
    padding: var(--espace-moyen);
    background: var(--couleur-zone);
}

.horaires {
    grid-area: horaires;
}

.conseils {
    grid-area: conseils;
}

.contact {
    grid-area: contact;
}

h1,
h2 {
    line-height: 1.2;
}

h1 {
    margin-top: 0;
}

ul {
    padding-left: var(--espace-grand);
}

li + li {
    margin-top: var(--espace-petit);
}

Dans cette feuille, la grille externe réserve une rangée à l’en-tête, puis une rangée au contenu principal et au contact. Le conteneur .contenu utilise une grille distincte pour empiler les horaires et les conseils : vous gardez ainsi ces deux sections ensemble, sans ajouter leurs détails au placement global. Les règles grid-area associent les zones aux éléments, conformément à la méthode déjà pratiquée dans « Placer les zones de la page ».

Vérifiez le squelette avant de poursuivre

Ouvrez le fichier dans le navigateur et vérifiez que l’en-tête occupe sa propre rangée, que les horaires et les conseils restent groupés à gauche et que le contact apparaît à droite. Cliquez sur les liens pour confirmer qu’ils ciblent les bonnes sections. Si une zone se place au mauvais endroit, comparez le nom de sa classe, la valeur de grid-area et les noms déclarés par le conteneur concerné ; cette vérification localise souvent une association manquante ou incohérente.

À retenir

• Structurez le HTML selon le rôle des zones : en-tête, contenu principal, sections et contact.
• Utilisez Flexbox pour la navigation et Grid pour organiser les grandes zones de la page.
• Placez les horaires et les conseils dans une grille interne, séparée de la grille globale.
• Vérifiez que les noms de zones et les associations grid-area correspondent au bon conteneur.

Dans la prochaine leçon, vous transformerez les conseils et le contact en composants de contenu mis en forme.