Les liens externes et internes
Les liens externes et internes
- 1Les liens HTML utilisent la balise <a> avec l'attribut href pour naviguer vers d'autres pages
- 2Les liens internes pointent vers la même page (#section) ou le même site, les externes vers d'autres sites
- 3Les attributs target, title et rel permettent de personnaliser le comportement et les propriétés des liens
Introduction
La navigation est l'épine dorsale du web. Sans liens, Internet ne serait qu'une collection de pages isolées. La balise <a> (pour "anchor" ou ancre) est l'outil fondamental qui transforme le HTML en un véritable réseau interconnecté.
Les fondamentaux de la balise <a>
Structure de base
La balise <a> fonctionne toujours avec l'attribut href (hypertext reference) qui définit la destination du lien :
1<!-- Structure basique -->
2<a href="destination">Texte du lien</a>
3
4<!-- Exemple concret -->
5<a href="https://www.example.com">Visitez notre site</a>Anatomie complète d'un lien
Types de liens et leurs utilisations
1. Liens externes
Les liens externes dirigent vers des sites web différents du vôtre :
1<!-- Lien externe basique -->
2<a href="https://www.google.com">Rechercher sur Google</a>
3
4<!-- Lien externe sécurisé (recommandé) -->
5<a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
6 Suivez-nous sur Facebook
7</a>
8
9<!-- Lien vers une adresse email -->
10<a href="mailto:contact@example.com">Nous contacter</a>
11
12<!-- Lien vers un numéro de téléphone -->
13<a href="tel:+33123456789">Appelez-nous</a>⚠️ Attention: Toujours utiliser
rel="noopener noreferrer"avectarget="_blank"pour des raisons de sécurité !
2. Liens internes
Les liens internes naviguent au sein de votre propre site :
1<!-- Lien vers une autre page du site -->
2<a href="/produits.html">Nos produits</a>
3<a href="../contact/index.html">Page de contact</a>
4
5<!-- Lien vers une section de la page actuelle -->
6<a href="#section-apropos">À propos de nous</a>
7
8<!-- Lien vers le haut de la page -->
9<a href="#top">Retour en haut</a>Types de chemins
| Type de chemin | Syntaxe | Utilisation | Exemple |
|---|---|---|---|
| Absolu | https://domaine.com/page | Sites externes | https://www.google.com |
| Relatif racine | /dossier/page.html | Depuis la racine du site | /contact/index.html |
| Relatif | page.html ou ../page.html | Relatif au fichier actuel | ../images/logo.png |
| Ancre | #section | Section de la page actuelle | #menu-principal |
Attributs essentiels de la balise <a>
L'attribut target
1<!-- Ouvre dans la même fenêtre (défaut) -->
2<a href="page.html">Lien normal</a>
3
4<!-- Ouvre dans un nouvel onglet -->
5<a href="https://external.com" target="_blank">Site externe</a>
6
7<!-- Ouvre dans un frame spécifique (rare) -->
8<a href="content.html" target="main-frame">Contenu</a>L'attribut title
1<!-- Ajoute une infobulle au survol -->
2<a href="/aide.html" title="Accédez à notre centre d'aide">Aide</a>
3
4<!-- Utile pour l'accessibilité -->
5<a href="document.pdf" title="Télécharger le guide PDF (2.3 Mo)">
6 Télécharger le guide
7</a>L'attribut rel
1<!-- Pour les liens externes (sécurité) -->
2<a href="https://external.com" rel="noopener noreferrer" target="_blank">
3 Site externe
4</a>
5
6<!-- Pour le SEO -->
7<a href="https://partner.com" rel="sponsored">Partenaire commercial</a>
8<a href="https://untrusted.com" rel="nofollow">Lien non endossé</a>Navigation interne avancée
Création d'ancres
Pour créer une navigation interne fluide, définissez des ancres avec l'attribut id :
1<!-- Définition des sections -->
2<h2 id="introduction">Introduction</h2>
3<p>Contenu de l'introduction...</p>
4
5<h2 id="methodes">Nos méthodes</h2>
6<p>Description des méthodes...</p>
7
8<h2 id="contact">Contact</h2>
9<p>Informations de contact...</p>
10
11<!-- Menu de navigation interne -->
12<nav>
13 <ul>
14 <li><a href="#introduction">Introduction</a></li>
15 <li><a href="#methodes">Méthodes</a></li>
16 <li><a href="#contact">Contact</a></li>
17 </ul>
18</nav>Le saviez-vous ?
Le premier lien hypertexte de l'histoire a été créé par Tim Berners-Lee en 1990. Il reliait la page d'accueil du premier site web au guide d'utilisation du World Wide Web !
— Archives du CERN et histoire du Web
Exemple complet de navigation
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4 <meta charset="UTF-8">
5 <title>Navigation complète</title>
6</head>
7<body>
8 <!-- Navigation principale -->
9 <nav id="menu-principal">
10 <ul>
11 <li><a href="/">Accueil</a></li>
12 <li><a href="/produits/">Produits</a></li>
13 <li><a href="/services/">Services</a></li>
14 <li><a href="#contact">Contact</a></li>
15 </ul>
16 </nav>
17
18 <!-- Contenu principal -->
19 <main>
20 <section id="presentation">
21 <h1>Notre entreprise</h1>
22 <p>Découvrez nos services...</p>
23 <a href="#services" title="Voir le détail de nos services">
24 En savoir plus sur nos services
25 </a>
26 </section>
27
28 <section id="services">
29 <h2>Nos services</h2>
30 <p>Nous proposons...</p>
31 </section>
32
33 <section id="contact">
34 <h2>Contact</h2>
35 <p>
36 <a href="mailto:contact@entreprise.com"
37 title="Envoyer un email">contact@entreprise.com</a>
38 </p>
39 <p>
40 <a href="tel:+33123456789"
41 title="Appeler directement">01 23 45 67 89</a>
42 </p>
43 </section>
44 </main>
45
46 <!-- Liens externes -->
47 <footer>
48 <p>Suivez-nous :</p>
49 <a href="https://facebook.com/entreprise"
50 target="_blank"
51 rel="noopener noreferrer"
52 title="Notre page Facebook">Facebook</a>
53
54 <a href="https://twitter.com/entreprise"
55 target="_blank"
56 rel="noopener noreferrer"
57 title="Notre compte Twitter">Twitter</a>
58 </footer>
59</body>
60</html>Bonnes pratiques et points clés
💡 À retenir: Un bon lien doit être descriptif et explicite. Évitez les textes génériques comme "cliquez ici" ou "lire la suite".
🎯 En pratique: Pour améliorer l'accessibilité, le texte du lien doit être compréhensible même hors contexte. Les lecteurs d'écran peuvent naviguer de lien en lien.
⚠️ Attention: N'abusez pas des liens qui s'ouvrent dans de nouveaux onglets (
target="_blank"). Cela peut perturber l'expérience utilisateur, surtout sur mobile.