Aller au contenu principal

Module HTML.4 – Liens & navigation

Objectif​

Maîtriser les liens HTML (<a>), la navigation interne et externe, tous les attributs importants, et créer une navigation accessible pour des sites web professionnels.

Théorie​

Balise <a> (anchor)​

Lien de base :

<a href="https://example.com">Visiter Example</a>

Structure :

  • href : URL de destination (obligatoire)
  • Contenu : Texte ou élément cliquable

Types de liens​

Lien externe​

<a href="https://example.com">Site externe</a>

Bonnes pratiques :

  • Ajouter target="_blank" pour ouvrir dans un nouvel onglet
  • Ajouter rel="noopener noreferrer" pour la sécurité
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Site externe
</a>

Lien interne (même site)​

<a href="/about.html">À propos</a>
<a href="contact.html">Contact</a>
<a href="#section-id">Aller à la section</a>

Chemins :

  • /about.html : Chemin absolu depuis la racine
  • about.html : Chemin relatif (même dossier)
  • ../about.html : Dossier parent
  • #section-id : Ancre (lien vers un élément de la page)

Lien vers une ancre​

<!-- Lien -->
<a href="#section-1">Aller à la section 1</a>

<!-- Destination -->
<section id="section-1">
    <h2>Section 1</h2>
</section>

Lien email​

<a href="mailto:contact@example.com">Envoyer un email</a>
<a href="mailto:contact@example.com?subject=Question&body=Bonjour">Email avec sujet</a>

Lien téléphone​

<a href="tel:+33123456789">Appeler</a>

Lien de téléchargement​

<a href="document.pdf" download>Télécharger le PDF</a>

Attributs importants​

href (obligatoire)​

URL de destination.

<a href="https://example.com">Lien</a>

target​

Où ouvrir le lien.

<a href="https://example.com" target="_blank">Nouvel onglet</a>
<a href="https://example.com" target="_self">Même onglet (défaut)</a>

Valeurs :

  • _blank : Nouvel onglet
  • _self : Même onglet (défaut)
  • _parent : Frame parent
  • _top : Fenêtre complète

rel (relation)​

Définit la relation avec la page liée.

<!-- Sécurité pour liens externes -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Lien externe sécurisé
</a>

<!-- Lien vers page suivante/précédente -->
<a href="page2.html" rel="next">Page suivante</a>
<a href="index.html" rel="prev">Page précédente</a>

<!-- Lien externe -->
<a href="https://example.com" rel="external">Site externe</a>

Valeurs importantes :

  • noopener : Empêche window.opener (sécurité)
  • noreferrer : N'envoie pas le referrer
  • external : Lien externe
  • nofollow : Ne pas suivre (SEO)

title​

Info-bulle au survol.

<a href="https://example.com" title="Visiter le site Example">
    Example
</a>

Note : Moins accessible que le texte du lien. Utiliser avec parcimonie.

download​

Force le téléchargement.

<a href="document.pdf" download>Télécharger</a>
<a href="document.pdf" download="mon-document.pdf">Télécharger avec nom personnalisé</a>

Structure de navigation​

<nav aria-label="Navigation principale">
    <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/about.html">À propos</a></li>
        <li><a href="/contact.html">Contact</a></li>
    </ul>
</nav>
  • Tab : Naviguer entre les liens
  • Entrée : Activer le lien
  • Les liens doivent être focusables et visibles au focus

Indicateurs visuels​

/* Focus visible */
a:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
}

Liens "skip" (sauter la navigation)​

<a href="#main-content" class="skip-link">Aller au contenu principal</a>

<nav>...</nav>

<main id="main-content">
    <!-- Contenu -->
</main>

Bonnes pratiques​

1. Texte de lien descriptif​

❌ Mauvais :

<a href="page.html">Cliquez ici</a>

✅ Bon :

<a href="page.html">En savoir plus sur nos services</a>

2. Liens externes sécurisés​

✅ Toujours :

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Site externe
</a>

3. Navigation structurée​

✅ Utiliser <nav> et listes :

<nav>
    <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/about.html">À propos</a></li>
    </ul>
</nav>

4. Liens actifs​

✅ Indiquer la page courante :

<nav>
    <ul>
        <li><a href="/" aria-current="page">Accueil</a></li>
        <li><a href="/about.html">À propos</a></li>
    </ul>
</nav>

Exercices guidés​

Exercice 1 : Liens de base​

Créez une page avec :

  • Un lien externe vers Google
  • Un lien interne vers une autre page
  • Un lien email
  • Un lien téléphone

Exercice 2 : Navigation​

Créez une barre de navigation avec :

  • 5 liens (Accueil, À propos, Services, Blog, Contact)
  • Structure <nav> avec liste <ul>
  • Lien actif avec aria-current="page"

Exercice 3 : Ancres​

Créez une page avec :

  • Un menu avec liens vers sections
  • Sections avec id correspondants
  • Testez la navigation par ancres

Exercice 4 : Liens sécurisés​

Créez des liens externes avec :

  • target="_blank"
  • rel="noopener noreferrer"
  • Testez la sécurité (pas de window.opener)

Exercice 5 : Navigation accessible​

Créez une navigation avec :

  • aria-label sur <nav>
  • Focus visible sur les liens
  • Lien "skip" vers le contenu principal
  • Testez avec la navigation clavier (Tab)

❌ Erreurs fréquentes​

Erreur 1 : "Cliquez ici"​

❌ Mauvais :

<a href="page.html">Cliquez ici</a>

✅ Bon :

<a href="page.html">En savoir plus</a>

Pourquoi : Le texte doit être descriptif hors contexte (screen readers).

Erreur 2 : Liens externes non sécurisés​

❌ Mauvais :

<a href="https://example.com" target="_blank">Lien</a>

✅ Bon :

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Lien</a>

Pourquoi : rel="noopener" empêche l'accès à window.opener (sécurité).

Erreur 3 : Navigation sans structure​

❌ Mauvais :

<nav>
    <a href="/">Accueil</a>
    <a href="/about.html">À propos</a>
</nav>

✅ Bon :

<nav>
    <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/about.html">À propos</a></li>
    </ul>
</nav>

Pourquoi : Structure sémantique pour l'accessibilité.

Erreur 4 : Liens sans href​

❌ Mauvais :

<a onclick="doSomething()">Action</a>

✅ Bon :

<button onclick="doSomething()">Action</button>
<!-- ou -->
<a href="#" onclick="doSomething(); return false;">Action</a>

Pourquoi : Utiliser <button> pour les actions, pas <a>.

Erreur 5 : Oublier aria-current​

❌ Mauvais :

<a href="/" class="active">Accueil</a>

✅ Bon :

<a href="/" aria-current="page">Accueil</a>

Pourquoi : aria-current indique la page active aux screen readers.

🚀 Mini-projet​

Mission : Créer un site multi-pages avec navigation

Créez un site avec 3 pages :

Pages :

  1. index.html : Page d'accueil
  2. about.html : À propos
  3. contact.html : Contact

Navigation :

  • Barre de navigation sur chaque page
  • Liens entre les pages
  • Lien actif avec aria-current="page"
  • Structure <nav> avec liste

Liens supplémentaires :

  • Lien externe sécurisé vers un site
  • Lien email sur la page contact
  • Lien téléphone sur la page contact
  • Ancres vers sections sur une page

Critères :

  • ✅ Navigation accessible (structure, aria-label)
  • ✅ Liens externes sécurisés
  • ✅ Texte de liens descriptif
  • ✅ Focus visible sur les liens
  • ✅ Navigation clavier fonctionnelle

Objectif : Créer une navigation professionnelle et accessible.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les liens, la navigation, et avez créé un site multi-pages avec navigation accessible.