Apprends à créer des hyperliens avec les balises d'ancrage, à ouvrir des liens dans de nouveaux onglets, et à comprendre la différence entre les URLs absolues et relatives.
Les liens sont ce qui fait du web une toile. Ils permettent aux utilisateurs de naviguer entre les pages, de sauter vers des sections, de télécharger des fichiers et même d'envoyer des emails.
L'élément HTML pour créer un lien est la balise d'ancrage : <a>. Elle utilise l'attribut href (abréviation de "hypertext reference") pour spécifier la destination du lien.
<a href="https://example.com">Visiter Example</a>
Le texte entre les balises ouvrantes et fermantes <a> est appelé le texte du lien (ou texte d'ancrage). C'est ce que l'utilisateur voit et sur quoi il clique. Un bon texte de lien est descriptif — évite les phrases vagues comme "cliquez ici". Décris plutôt la destination :
<a href="...">Cliquez ici</a><a href="...">Lire la documentation complète</a>Par défaut, cliquer sur un lien navigue l'onglet actuel du navigateur vers la nouvelle page. Si tu veux que le lien s'ouvre dans un nouvel onglet, ajoute l'attribut target="_blank" :
<a href="https://example.com" target="_blank">Ouvrir dans un nouvel onglet</a>
Quand tu utilises target="_blank", c'est une bonne pratique d'ajouter aussi rel="noopener noreferrer" pour la sécurité. Cela empêche la nouvelle page d'accéder à l'objet window de ta page :
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Lien externe sécurisé</a>
Utilise target="_blank" pour les liens externes (liens vers d'autres sites web). Pour la navigation interne au sein de ton propre site, garde le comportement par défaut pour que les utilisateurs restent dans le même onglet.
<!-- URL absolue : adresse complète incluant le protocole -->
<a href="https://developer.mozilla.org">MDN Web Docs</a>
<!-- URL relative : chemin relatif à la page actuelle -->
<a href="/about.html">À propos</a>
<a href="../contact.html">Contact (remonter d'un répertoire)</a>
<!-- Lien vers une adresse email -->
<a href="mailto:hello@example.com">Envoyez-nous un email</a>
<!-- Lien vers un numéro de téléphone -->
<a href="tel:+1234567890">Appelez-nous</a>
<!-- Lien vers une section de la même page (en utilisant un id) -->
<a href="#section-2">Aller à la Section 2</a>
<h2 id="section-2">Section 2</h2>Quel attribut dois-tu ajouter à une balise d'ancrage pour qu'elle s'ouvre dans un nouvel onglet du navigateur ?