Chapitre 190 | Navigation avec des ancres

Navigation avec des ancres

Objectifs pédagogiques

Dans ce chapitre, il s’agit de :

Découvrir comment utiliser des ancres pour naviguer au sein d’une même page.
Comprendre la différence entre les ID (identifiants uniques) et les classes (répétables).
Structurer une page longue avec une navigation interne intuitive, incluant des liens de retour au sommet de la page.

Différence entre ID et classes

les ID identifient des éléments uniques, tandis que les classes permettent de styliser plusieurs éléments similaires.

Les identifiants (id) :

Exemple correct :

<section id="introduction">...</section> <section id="conclusion">...</section>

Exemple incorrect (à éviter) :

<section id="introduction">...</section> <div id="introduction">...</div> <!-- Erreur : deux fois le même ID -->

Les classes (class) :

<div class="contenu">...</div> <div class="contenu">...</div> <!-- La classe "contenu" est utilisée plusieurs fois -->

Page : navigation avec des ancres

La page suivante est organisée en cinq sections principales. Elle inclut :

Une barre de navigation en haut de la page, avec des liens pointant vers les différentes sections à l’aide d’ancres (#id).
Un lien « Back to top » à la fin de chaque section pour revenir rapidement au sommet de la page.

Contenu de la page : `navigation-interne.html`

HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation interne</title>
    <link rel="stylesheet" href="css/style.css">
    
</head>
<body id="top">
    <h1>Navigation interne avec ancres</h1>

    <!-- Navigation interne -->
    <nav>
        <a href="#chapitre1">Chapitre 1</a>
        <a href="#chapitre2">Chapitre 2</a>
        <a href="#chapitre3">Chapitre 3</a>
        <a href="#chapitre4">Chapitre 4</a>
        <a href="#chapitre5">Chapitre 5</a>
    </nav>

    <!-- Sections -->
    <section id="chapitre1">
        <h2>Chapitre 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor nisi et nulla elementum, ac faucibus purus fermentum.</p>
        <img src="https://via.placeholder.com/800x400" alt="Image illustrative pour le chapitre 1">
        <a href="#top" class="back-to-top">Retour en haut</a>
    </section>

    <section id="chapitre2">
        <h2>Chapitre 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor nisi et nulla elementum, ac faucibus purus fermentum.</p>
        <img src="https://via.placeholder.com/800x400" alt="Image illustrative pour le chapitre 2">
        <a href="#top" class="back-to-top">Retour en haut</a>
    </section>

    <section id="chapitre3">
        <h2>Chapitre 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor nisi et nulla elementum, ac faucibus purus fermentum.</p>
        <img src="https://via.placeholder.com/800x400" alt="Image illustrative pour le chapitre 3">
        <a href="#top" class="back-to-top">Retour en haut</a>
    </section>

    <section id="chapitre4">
        <h2>Chapitre 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor nisi et nulla elementum, ac faucibus purus fermentum.</p>
        <img src="https://via.placeholder.com/800x400" alt="Image illustrative pour le chapitre 4">
        <a href="#top" class="back-to-top">Retour en haut</a>
    </section>

    <section id="chapitre5">
        <h2>Chapitre 5</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor nisi et nulla elementum, ac faucibus purus fermentum.</p>
        <img src="https://via.placeholder.com/800x400" alt="Image illustrative pour le chapitre 5">
        <a href="#top" class="back-to-top">Retour en haut</a>
    </section>
</body>
</html>


        /* Styles spécifiques pour cette page */
        nav {
            background-color: #f4f4f4;
            padding: 10px;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        nav a {
            margin-right: 10px;
            text-decoration: none;
            color: blue;
        }

        nav a:hover {
            color: red;
        }

        section {
            margin-bottom: 50px;
        }

        img {
            display: block;
            margin: 10px auto;
        }

        .back-to-top {
            display: block;
            margin-top: 20px;
            text-align: center;
        }

Exercice :

Vous rajoutez un chapitre et ajouter un lien de type encre dans la navigation. Vous testez la solution.

Version CodePen

Points pédagogiques

Utilisation des ID pour les ancres :
Chaque section est identifiée par un ID unique (chapitre1, chapitre2, etc.). Les liens dans la navigation pointent vers ces ID à l’aide de href="#id".
Lien « Retour en haut » :
Un lien de retour vers le haut de la page est ajouté à la fin de chaque section (href="#top") pour faciliter la navigation.
Différence entre ID et classes :
Comprendre l’unicité des ID pour les ancres et le rôle des classes pour la stylisation.