Balises de navigation

2.1 Liens ancres

La navigation à l'intérieur d'une page HTML aide les utilisateurs à accéder rapidement à différentes sections du document. C'est particulièrement utile pour les pages longues avec beaucoup de contenu. En HTML, il existe plusieurs méthodes pour implémenter cette navigation, y compris l'utilisation de liens ancres, l'attribut id, ainsi que la navigation via JavaScript.

Les liens ancres sont la méthode la plus courante pour naviguer à l'intérieur d'une page. Ils permettent aux utilisateurs d'accéder à certaines parties du document en utilisant des balises ancres.

Exemple d'utilisation :

Création d'ancres avec l'attribut id :

    
      <h2 id="section1">Section 1</h2>
      <p>Contenu de la section 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Contenu de la section 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Contenu de la section 3...</p>
    
  

Création de liens vers des ancres :

    
      <nav>
        <ul>
          <li><a href="#section1">Aller à la Section 1</a></li>
          <li><a href="#section2">Aller à la Section 2</a></li>
          <li><a href="#section3">Aller à la Section 3</a></li>
        </ul>
      </nav>
    
  

Navigation avec l'attribut name

L'attribut name peut également être utilisé pour créer des ancres, bien que son utilisation soit moins courante et considérée comme obsolète.

Exemple

    
      <a name="top"></a>
      <p>Haut de la page...</p>
      <a name="bottom"></a>
      <p>Bas de la page...</p>
      <nav>
        <ul>
          <li><a href="#top">Aller en haut</a></li>
          <li><a href="#bottom">Aller en bas</a></li>
        </ul>
      </nav>
    
  

2.2 Défilement avec JavaScript

JavaScript offre des possibilités plus flexibles pour la navigation dans une page. Grâce aux méthodes scrollIntoView, scrollTo, et d'autres, il est possible d'implémenter un défilement fluide vers différents éléments de la page.

Exemple d'utilisation :

Ce code fait défiler la page de manière fluide vers l'élément spécifié lorsque l'on clique sur un bouton.

    
      <button onclick="scrollToSection('section1')">Aller à la Section 1</button>
      <button onclick="scrollToSection('section2')">Aller à la Section 2</button>
      <button onclick="scrollToSection('section3')">Aller à la Section 3</button>

      <h2 id="section1">Section 1</h2>
      <p>Contenu de la section 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Contenu de la section 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Contenu de la section 3...</p>
    
  

    
     // Fonction pour le défilement fluide vers une section spécifique de la page
      function scrollToSection(sectionId) {
        // Trouver l'élément par son ID
        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
      }
    
  

2.3 Balise <nav>

La balise <nav> en HTML5 est conçue pour définir une section de la page contenant des liens de navigation. Cette balise aide à désigner sémantiquement les blocs de navigation, ce qui améliore la structure de la page web et la rend plus accessible pour les utilisateurs ainsi que pour les moteurs de recherche.

La balise <nav> est utilisée pour regrouper des liens qui sont destinés à la navigation sur le site ou à l'intérieur du document actuel. Cela peut inclure des menus principaux, des menus secondaires, des fils d'Ariane, des listes de pages, et d'autres éléments de navigation.

Synthaxe

    
      <nav>
        <!-- Éléments de navigation -->
      </nav>
    
  

Exemple d'utilisation

    
      <header>
        <h1>Mon site</h1>
        <nav>
          <ul>
            <li><a href="#home">Accueil</a></li>
            <li><a href="#about">À propos</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contacts</a></li>
          </ul>
        </nav>
      </header>
    
  

Explication

• Balise <header> : utilisée pour créer l'en-tête de la page, qui inclut le menu de navigation
• Balise <nav> : contient une liste de liens menant à différentes sections de la page
• Balise <ul> et <li> : utilisées pour créer une liste de liens de navigation
• Balise <a> : définit les liens eux-mêmes, que les utilisateurs peuvent suivre pour accéder à d'autres parties de la page ou du site

2.4 Application de la balise <nav>

La balise <nav> est utilisée pour regrouper des liens de navigation, tels que :

• Menu principal du site
• Menus secondaires
• Fils d'Ariane (breadcrumbs)
• Liens vers les pages de pagination
• Autres liens de navigation

Menu principal du site

    
      <nav>
        <ul>
          <li><a href="#home">Accueil</a></li>
          <li><a href="#about">À propos</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contacts</a></li>
        </ul>
      </nav>
    
  

Menu secondaire

    
      <nav>
        <ul>
          <li><a href="#faq">Questions fréquentes</a></li>
          <li><a href="#support">Support</a></li>
          <li><a href="#privacy">Politique de confidentialité</a></li>
        </ul>
      </nav>
    
  

Fils d'Ariane (breadcrumbs)

    
      <nav aria-label="breadcrumb">
        <ol>
          <li><a href="/home">Accueil</a></li>
          <li><a href="/category">Catégorie</a></li>
          <li>Page actuelle</li>
        </ol>
      </nav>
    
  

Avantages de l'utilisation de la balise <nav>

Balise sémantique

L'utilisation de la balise <nav> aide les moteurs de recherche et les technologies pour les personnes ayant des limitations à mieux comprendre la structure de la page. Cela rend le site plus accessible et améliore son SEO.

Amélioration de la structure de la page

La balise <nav> sépare clairement les éléments de navigation du contenu principal, ce qui rend la mise en page de la page plus logique et structurée.

Facilité de stylisation

Les éléments de navigation enfermés dans la balise <nav> sont faciles à styliser avec CSS pour améliorer l'apparence et la facilité d'utilisation.