Les liens hypertextes sont la pierre angulaire du web. Sans eux, Internet ne serait qu'une collection de pages isolées et figées.
Le pouvoir des liens :
- Navigation : Passer d'une page à une autre, d'un site à un autre
- Interconnexion : Créer un réseau d'informations connectées
- Accessibilité : Permettre aux utilisateurs d'accéder aux ressources
- Référencement : Les moteurs de recherche utilisent les liens pour découvrir et évaluer les pages
Le "H" de HTML
Le "H" dans HTML signifie "HyperText", qui fait référence à cette capacité de lier des documents entre eux. C'est ce qui distingue le web des autres médias.
<!-- Exemple basique de lien -->
<a href="https://www.example.com">Visitez Example.com</a>
La balise <a> (anchor) est l'élément fondamental pour créer des liens hypertextes en HTML.
Structure de base
<a href="destination.html">
Texte cliquable
</a>
Attributs essentiels
href : Spécifie l'URL de destinationtitle : Info-bulle au survol (accessibilité)target : Où ouvrir le lienrel : Relation avec la cible
Bonnes pratiques
- Toujours inclure l'attribut
href
- Fermer la balise avec
</a>
- Utiliser
title pour améliorer l'accessibilité
- Vérifier que les liens ne sont pas cassés
Le texte entre les balises <a> et </a> est crucial pour l'expérience utilisateur et le référencement.
Exemples concrets
Bon exemple
<a href="#">
Contactez notre équipe
</a>
Descriptif et clair sur la destination
Mauvais exemple
<a href="#">
Cliquez ici
</a>
Peu informatif hors contexte
À éviter
- "Cliquez ici" ou "En savoir plus" sans contexte
- URL longues comme texte de lien
- Texte trop générique
Accessibilité
Les lecteurs d'écran peuvent extraire tous les liens d'une page. Un texte clair est essentiel pour les utilisateurs handicapés.
Les liens externes pointent vers des pages situées sur d'autres domaines.
<a href="https://www.wikipedia.org">
Consulter Wikipedia
</a>
Caractéristiques :
- URL complète avec
https://
- Ouvre par défaut dans le même onglet
- Peut améliorer votre SEO si pertinents
Bonnes pratiques
- Vérifiez que le site lié est fiable
- Indiquez à l'utilisateur qu'il quitte votre site
- Utilisez
rel="nofollow" pour les liens non approuvés
Les liens internes relient les pages d'un même site web.
<a href="apropos.html">À propos</a>
<a href="#">Contact</a>
<a href="blog/index.html">Blog</a>
Chemins relatifs vs absolus
Relatif : "contact.html" (depuis le même dossier)
Relatif : "blog/index.html" (dossier enfant)
Relatif : "../index.html" (dossier parent)
Absolu : "/contact.html" (depuis la racine du site)
Avantages
- Navigation facile pour les utilisateurs
- Améliore le référencement (SEO)
- Maintient les visiteurs sur votre site
Les ancres permettent de créer des liens vers des sections spécifiques d'une page.
Créer la cible
<h2 id="section1">Section 1</h2>
Créer le lien
<a href="#section1">
Aller à la section 1
</a>
Utilisation pratique
- Tables des matières
- Retour en haut de page
- Navigation dans les longues pages
- FAQ et sections de documentation
Attention
N'utilisez pas # seul comme lien vide. C'est une mauvaise pratique.
L'attribut target="_blank" ouvre le lien dans un nouvel onglet.
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer">
Exemple (nouvel onglet)
</a>
Pourquoi rel="noopener noreferrer" ?
- Sécurité : Empêche le tabnabbing
- Performance : Améliore les performances
- Confidentialité : Empêche le suivi entre pages
Quand utiliser ?
- Liens vers des sites externes
- Documents à télécharger
- Quand vous voulez que l'utilisateur garde votre page ouverte
À éviter
Ne pas ouvrir tous les liens dans un nouvel onglet. Laissez le choix à l'utilisateur.