PhpBB Lab Académie

Structurer une page HTML avec header, nav, main et footer, comprendre le rôle précis de chacune de ces zones, distinguer head de header et organiser la navigation du petit site créé dans la leçon précédente sans modifier son apparence avec CSS.

Nous allons donner une vraie structure sémantique à notre page

Dans la leçon précédente, vous avez créé un petit site composé de plusieurs pages :

index.html
apropos.html
contact.html

Vous savez déjà relier ces pages avec des liens relatifs.

Votre contenu fonctionne donc.

Mais nous pouvons maintenant améliorer sa structure.

Jusqu’ici,

body

contient directement des titres, des paragraphes, des listes et des liens.

Nous allons apprendre à indiquer au navigateur le rôle des grandes zones de la page.

Nous utiliserons quatre nouveaux éléments :

header
nav
main
footer

Ces éléments sont dits sémantiques parce qu’ils décrivent le rôle du contenu qu’ils contiennent.

1. Sémantique signifie « donner du sens à la structure »

Regardez ces deux morceaux de contenu :

<p>Accueil - À propos - Contact</p>

et :

<nav>
    ...
</nav>

Le premier est simplement un paragraphe.

Le deuxième indique explicitement :

ce contenu constitue une zone de navigation

Le navigateur et les technologies d’assistance disposent donc d’une information supplémentaire sur le rôle de cette partie de la page.

C’est exactement le principe du HTML sémantique :

choisir un élément pour ce qu’il signifie
et non uniquement pour son apparence

Vous avez déjà appliqué cette logique avec les titres, les listes et les liens.

2. Attention : head et header ne sont pas la même chose

Cette distinction est importante.

Vous connaissez déjà :

<head>
    <meta charset="utf-8">
    <title>Mon premier site HTML</title>
</head>

L’élément

head

contient des informations sur le document.

Il se trouve en dehors de

body

.

Aujourd’hui, nous découvrons :

<header>
</header>

L’élément

header

se trouve dans

body

.

Il sert à regrouper du contenu d’introduction ou d’en-tête pour la page ou une partie de la page.

Retenez :

head = informations techniques et descriptives sur le document
header = zone d’en-tête dans le contenu de la page

Ne les confondez pas.

3. À quoi sert header ?

Pour notre petit site, le

header

va contenir les informations placées en tête de page.

Par exemple :

<header>
    <p>Mon premier site HTML</p>
</header>

Nous utilisons ici un paragraphe pour le nom du site.

Pourquoi pas immédiatement un

h1

?

Parce que nous voulons conserver le

h1

pour le titre principal propre à chaque page.

Ainsi :

index.html -> h1 : Accueil
apropos.html -> h1 : À propos
contact.html -> h1 : Contact

Le nom du site peut être répété dans l’en-tête, tandis que le

h1

décrit précisément la page actuelle.

4. À quoi sert nav ?

Dans la leçon précédente, vous avez créé plusieurs liens permettant de passer d’une page à l’autre.

Ces liens constituent maintenant la navigation principale du site.

HTML possède un élément adapté :

nav

Nous pouvons écrire :

<nav>
    <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="apropos.html">À propos</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Vous connaissez déjà tout ce qui se trouve à l’intérieur :

-

ul

;
-

li

;
-

a

;
-

href

.

La seule nouveauté est

nav

, qui indique :

ce groupe contient des liens de navigation importants

5. Pourquoi utiliser une liste dans nav ?

Nos trois liens appartiennent au même ensemble :

navigation principale du site

Une liste

ul

est donc cohérente.

L’ordre n’est pas une procédure comme dans une liste d’étapes.

Nous n’avons pas besoin d’utiliser

ol

.

La structure devient :

nav
    ul
        li
            a
        li
            a
        li
            a

Vous réutilisez donc l’imbrication apprise au début du cours.

6. nav ne sert pas à entourer chaque lien de la page

Un élément

nav

est destiné aux blocs importants de navigation.

Par exemple :

- navigation principale du site ;
- menu d’une section importante ;
- ensemble de liens permettant de se déplacer dans un document.

En revanche, un simple lien placé dans un paragraphe n’a pas besoin d’être entouré par

nav

.

Par exemple :

<p>Vous pouvez <a href="https://example.com">consulter le site Example</a>.</p>

reste parfaitement adapté.

Retenez :

nav = groupe important de liens de navigation
a = lien individuel

7. À quoi sert main ?

L’élément :

main

contient le contenu principal propre à la page.

Dans

index.html

, nous pouvons écrire :

<main>
    <h1>Accueil</h1>
    <p>Bienvenue sur mon premier site HTML.</p>
</main>

Le contenu de

main

doit représenter ce que l’utilisateur est principalement venu consulter sur cette page.

La navigation répétée du site n’a donc pas besoin d’être dans

main

.

Le pied de page non plus.

8. Dans notre cours, une page possède un seul main visible

Pour garder une structure simple et claire, chaque page de notre petit site utilisera un seul élément :

<main>
</main>

Cela permet d’identifier clairement la zone de contenu principal.

Par exemple :

<body>
    <header>
        ...
    </header>

    <main>
        ...
    </main>

    <footer>
        ...
    </footer>
</body>

Cette structure devient facile à comprendre même sans regarder le rendu visuel.

9. À quoi sert footer ?

L’élément :

footer

représente une zone de pied de page.

Pour notre petit site, nous pouvons y placer une information simple :

<footer>
    <p>Site créé pour apprendre HTML.</p>
</footer>

Un

footer

peut contenir différents types d’informations selon le contexte.

Par exemple :

- des informations sur le site ;
- des informations de contact ;
- des liens secondaires ;
- une mention de droits d’auteur.

Pour notre exercice, nous restons volontairement simples.

10. footer ne veut pas dire « texte collé visuellement en bas de l’écran »

HTML décrit ici le rôle du contenu.

L’élément

footer

signifie :

cette zone joue le rôle de pied de page

Il ne décide pas tout seul de sa position graphique précise.

Plus tard, CSS pourra contrôler l’apparence et la disposition.

Nous retrouvons encore la même règle :

HTML = structure et sens
CSS = apparence

11. Construire le squelette sémantique de body

Nous pouvons maintenant organiser

body

ainsi :

<body>
    <header>
        ...
    </header>

    <main>
        ...
    </main>

    <footer>
        ...
    </footer>
</body>

Dans le

header

, nous placerons le nom du site et la navigation.

Dans

main

, le contenu propre à la page.

Dans

footer

, les informations de fin de page.

12. Ajouter nav dans header

Une structure complète de l’en-tête peut être :

<header>
    <p>Mon premier site HTML</p>

    <nav>
        <ul>
            <li><a href="index.html">Accueil</a></li>
            <li><a href="apropos.html">À propos</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

Le

nav

est ici imbriqué dans

header

.

C’est logique : la navigation principale fait partie de notre zone d’en-tête.

13. Construire main sur la page d’accueil

Après

header

, ajoutez :

<main>
    <h1>Accueil</h1>
    <p>Bienvenue sur mon premier site HTML.</p>

    <h2>Ce que j’apprends</h2>
    <p>Je découvre progressivement comment structurer des pages web avec HTML.</p>
</main>

Le

h1

représente le titre principal de cette page :

Accueil

Le

h2

représente une grande section placée sous ce titre.

Nous conservons donc la hiérarchie déjà apprise.

14. Ajouter footer

Après

main

, ajoutez :

<footer>
    <p>Site créé pour apprendre HTML.</p>
</footer>

Nous avons maintenant les trois grandes zones principales :

header
main
footer

avec

nav

à l’intérieur de

header

.

15. La page d’accueil complète

Votre

index.html

peut maintenant devenir :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Accueil - Mon premier site HTML</title>
</head>
<body>
    <header>
        <p>Mon premier site HTML</p>

        <nav>
            <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="apropos.html">À propos</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>Accueil</h1>
        <p>Bienvenue sur mon premier site HTML.</p>

        <h2>Ce que j’apprends</h2>
        <p>Je découvre progressivement comment structurer des pages web avec HTML.</p>
    </main>

    <footer>
        <p>Site créé pour apprendre HTML.</p>
    </footer>
</body>
</html>

Enregistrez puis actualisez.

La page peut sembler visuellement assez proche de ce que vous aviez auparavant.

C’est normal.

L’amélioration est principalement structurelle et sémantique.

16. La structure devient lisible comme un plan

Nous pouvons représenter la page ainsi :

body
    header
        nom du site
        nav
            liste de liens
    main
        h1
        contenu principal
    footer
        informations de fin de page

Même sans couleur ni mise en page particulière, nous comprenons le rôle des grandes zones.

17. Pourquoi cette structure aide l’accessibilité ?

Les technologies d’assistance peuvent exploiter les éléments sémantiques pour aider l’utilisateur à se repérer.

Selon le navigateur, le lecteur d’écran et ses réglages, des zones comme :

navigation
contenu principal
pied de page

peuvent être identifiées comme des régions particulières de la page.

Cela permet notamment de se déplacer plus rapidement vers le contenu recherché.

Mais cette aide n’est utile que si nous choisissons les éléments pour leur vrai rôle.

Nous n’utiliserons donc pas

nav

simplement parce qu’un bloc contient plusieurs mots, ni

main

pour entourer toute la page sans réfléchir.

18. Appliquer la même logique à apropos.html

Votre page

apropos.html

peut reprendre le même

header

, la même navigation et le même

footer

.

Seul le contenu principal change :

<main>
    <h1>À propos</h1>
    <p>Ce site me permet de pratiquer progressivement les bases de HTML.</p>
</main>

Le

main

est donc spécifique à la page.

19. Appliquer la même logique à contact.html

Dans

contact.html

, le contenu principal peut être :

<main>
    <h1>Contact</h1>
    <p>Cette page présente les informations permettant de me contacter.</p>
</main>

Le reste de la structure peut rester cohérent avec les autres pages.

Vous commencez ainsi à construire un site dont l’organisation générale est stable d’une page à l’autre.

20. Les éléments sémantiques ne remplacent pas les titres

Une erreur serait de penser :

J’ai mis main, donc je n’ai plus besoin de h1.

Ce serait faux.

main

indique la zone principale.

h1

donne un titre à la page.

Ils ont des rôles différents.

De la même manière :

header

ne remplace pas automatiquement un titre.

Et :

nav

ne remplace pas les liens

a

.

Chaque élément apporte une information différente.

21. Ce que nous ne faisons pas encore

HTML possède d’autres éléments sémantiques importants, notamment :

section
article

Nous allons les apprendre dans la prochaine leçon.

Nous ne les ajoutons pas aujourd’hui, car il est préférable de maîtriser d’abord les quatre grandes zones :

header
nav
main
footer

Avant de passer à la suite

Vous devez maintenant savoir expliquer :

- la différence entre

head

et

header

;
- le rôle de

header

;
- le rôle de

nav

;
- pourquoi

nav

n’entoure pas chaque lien individuel ;
- le rôle de

main

;
- pourquoi notre page utilise un seul

main

visible ;
- le rôle de

footer

;
- pourquoi ces éléments décrivent une structure et non une apparence ;
- pourquoi les titres

h1

,

h2

restent nécessaires à l’intérieur de cette structure.

Dans la prochaine leçon, nous apprendrons à utiliser

section

et

article

sans les confondre avec de simples conteneurs.

Imaginons une page présentant une association.

Une structure claire peut être :

<body>
    <header>
        <p>Association Horizon</p>

        <nav>
            <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="activites.html">Activités</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>Accueil</h1>
        <p>Bienvenue sur le site de l’association Horizon.</p>

        <h2>Notre mission</h2>
        <p>Nous organisons des activités ouvertes à tous.</p>
    </main>

    <footer>
        <p>Association Horizon.</p>
    </footer>
</body>

Le

header

contient l’en-tête général.

Le

nav

identifie la navigation principale.

Le

main

contient ce qui est propre à la page d’accueil.

Le

footer

contient l’information de fin de page.

Le

h1

reste nécessaire : il donne son titre au contenu principal de la page.

Reprenez les trois fichiers créés dans la leçon précédente :

index.html
apropos.html
contact.html

Commencez par

index.html

.

1. Dans

body

, créez un

header

.

2. Dans ce

header

, ajoutez :

<p>Mon premier site HTML</p>

3. Toujours dans

header

, créez un

nav

.

4. Dans

nav

, créez une liste non ordonnée contenant les liens :

Accueil
À propos
Contact

avec les destinations :

index.html
apropos.html
contact.html

5. Après

header

, créez un seul

main

.

6. Dans

main

, ajoutez :

<h1>Accueil</h1>

puis au moins un paragraphe.

7. Ajoutez ensuite un

h2

et un paragraphe pour créer une grande section du contenu principal.

8. Après

main

, ajoutez :

<footer>
    <p>Site créé pour apprendre HTML.</p>
</footer>

9. Enregistrez et actualisez la page.

10. Vérifiez que les trois liens de navigation fonctionnent toujours.

11. Reproduisez ensuite la même structure générale dans

apropos.html

et

contact.html

, en adaptant le

h1

de chaque page.

Pour terminer, expliquez avec vos propres mots pourquoi :

head

et :

header

ne jouent pas le même rôle.

HTML permet de décrire les grandes zones d’une page avec des éléments sémantiques.

header

représente une zone d’en-tête.

nav

représente un bloc important de navigation.

main

contient le contenu principal propre à la page.

footer

représente une zone de pied de page.

Attention :

head

et :

header

ne sont pas la même chose.

head

contient des informations sur le document.

header

se trouve dans

body

et fait partie du contenu structuré de la page.

Une structure simple peut être :

<body>
    <header>
        ...
        <nav>
            ...
        </nav>
    </header>

    <main>
        <h1>Titre principal de la page</h1>
        ...
    </main>

    <footer>
        ...
    </footer>
</body>

Ces éléments décrivent le rôle des zones de la page.

Ils ne servent pas à choisir leur apparence visuelle.

Les titres

h1

,

h2

et les autres éléments déjà appris restent nécessaires à l’intérieur de cette structure.

Dans la prochaine leçon, nous apprendrons à utiliser

section

et

article

correctement.