CHAPITRE 6 : LES LIENS HYPERTEXTES : LES LIENS EXTERNES

Video du chapitre : chaine GeniusClassrooms

Le lien, fondement du Web

C'est le lien hypertexte qui a donné son nom à la toile : sans lui, chaque page serait un îlot isolé. Une seule balise suffit : <a>, pour anchor.

1. La syntaxe de base

<a href="https://www.pandacodeur.com">Visiter PandaCodeur</a>

Deux parties à distinguer : href indique la destination, et le texte entre les balises est ce que l'utilisateur voit et clique.

Soignez le texte du lien

Le texte doit décrire la destination, même lu hors contexte. « Cliquez ici » n'apprend rien, ni au visiteur qui parcourt la page en diagonale, ni à Google, ni à un lecteur d'écran qui énumère les liens d'une page.

<!-- A eviter -->
<p>Pour voir nos cours, <a href="cours.html">cliquez ici</a>.</p>

<!-- Bien -->
<p>Consultez <a href="cours.html">la liste de nos cours en ligne</a>.</p>

2. Ouvrir dans un nouvel onglet

<a href="https://www.youtube.com/@GeniusClassrooms"
   target="_blank" rel="noopener noreferrer">Notre chaine YouTube</a>

target="_blank" ouvre un nouvel onglet. Ajoutez toujours rel="noopener noreferrer" : sans cela, la page ouverte garde une référence vers la vôtre, ce qui pose un problème de sécurité. À réserver aux liens externes : forcer un nouvel onglet pour la navigation interne agace le visiteur.

3. Écrire et téléphoner

<a href="mailto:contact@exemple.com">Nous ecrire</a>
<a href="tel:+237652027193">Appeler le +237 652 02 71 93</a>

Sur mobile, tel: déclenche l'appel : très utile pour une page de contact.

4. URL absolue ou relative ?

Règle simple : absolue vers l'extérieur, relative à l'intérieur de votre site. Les liens relatifs continuent de fonctionner si vous changez de nom de domaine.

5. Lien sur une image

<a href="https://www.pandacodeur.com">
    <img src="logo.png" alt="Logo PandaCodeur">
</a>

L'attribut alt devient alors le texte du lien pour un lecteur d'écran : il doit décrire la destination, pas seulement l'image.

À retenir

• href porte la destination, le contenu de la balise porte le texte cliquable
• Un texte de lien explicite, jamais « cliquez ici »
• target="_blank" s'accompagne de rel="noopener noreferrer"
• Absolue vers l'extérieur, relative à l'intérieur