Liens HTML

L’encodage URL a expliqué comment les caractères spéciaux circulent à l’intérieur d’une adresse. Cette session construit l’outil HTML du quotidien qui utilise ces adresses : l’élément anchor a avec un href. Les liens sont la façon dont les visiteurs se déplacent entre vos pages et vers le web plus large. Des destinations claires et un texte cliquable clair comptent autant qu’un balisage correct.

Ce qu’est un lien

Un hyperlien est un contrôle qui navigue quelque part quand on l’active. En HTML, vous enveloppez le contenu cliquable — en général du texte, parfois une image — dans <a>...</a> et vous mettez href sur la destination. Sans href, vous n’avez pas de lien de navigation normal. Le navigateur stylise les liens par défaut (souvent soulignés et colorés), mais l’essentiel reste la destination et le libellé.

Réponse directe

Écrivez <a href="URL">texte cliquable</a>. Le href peut être une adresse web complète comme https://www.example.com (absolue) ou un chemin vers un autre fichier de votre site comme about.html (relative). Les visiteurs cliquent le contenu entre les balises. Préférez un libellé qui décrit la destination — « À propos de ce site » — aux formules vides comme « cliquez ici ».

Liens absolus

Les URL absolues incluent un schéma (https:// ou http://) et en général un hôte. Utilisez-les pour des sites externes, ou quand vous avez vraiment besoin d’une adresse complète qui ne dépend pas du dossier courant.

Lire l’exemple absolu

• href contient la destination complète qui commence par https://
• Les mots Visit Example sont ce que l’utilisateur voit et active
• Une faute dans l’hôte ou le schéma casse le trajet même si les balises HTML sont valides
• Les liens absolus gagnent aussi à un texte honnête et descriptif

Liens relatifs sur votre propre site

Les URL relatives pointent vers des fichiers par rapport à l’emplacement de la page courante. C’est la façon quotidienne de relier index.html à about.html sans répéter votre nom de domaine. Les compétences File Paths s’appliquent : de mauvais dossiers produisent des échecs 404 silencieux.

Habitudes relatives utiles

• Gardez les pages liées dans une structure de dossiers claire
• Préférez des noms de fichiers à tirets, sans espaces
• Testez les deux sens : accueil → à propos et à propos → accueil
• Souvenez-vous qu’un déplacement de fichier HTML sans mise à jour des liens relatifs casse la navigation

Le texte du lien est du contenu, pas de la décoration

Les utilisateurs de lecteurs d’écran parcourent souvent une liste de liens sans entendre le paragraphe autour. « Cliquez ici » et « en savoir plus » répétés dix fois deviennent inutiles. Nommez la destination. Vous pouvez rester amical — soyez seulement précis.

Absolu vs relatif — choisissez selon le besoin

• Site externe que vous ne contrôlez pas → absolu https://…
• Autre page de votre projet → chemin relatif quand c’est possible
• Des liens du même site écrits en absolu fonctionnent encore, mais les liens relatifs restent portables quand vous renommez un domaine ou ouvrez les fichiers en local
  Des sessions plus tard traitent les titres sur les liens, les signets (#) et les liens e-mail ; maîtrisez d’abord a + href.

Liens cassés et 404

Si href pointe vers un fichier manquant ou un hôte mal orthographié, le navigateur va vers une page d’erreur (souvent HTTP 404). Le HTML autour du lien peut encore paraître parfait. Vérifiez toujours les chemins comme pour le favicon et les feuilles de style : orthographe, dossiers, et le fait que le fichier cible a bien été enregistré.

Pratiquer dans votre éditeur

1. Créez index.html et about.html dans le même dossier.
2. Sur la page d’accueil, ajoutez un lien relatif vers about.html avec un texte descriptif.
3. Sur la page à propos, ajoutez un lien relatif de retour vers index.html.
4. Ajoutez un lien absolu vers un site externe de confiance.
5. Suivez chaque lien dans le navigateur ; puis cassez volontairement un chemin relatif, observez l’échec, et corrigez-le.
6. Réécrivez tout texte « cliquez ici » en un nom de destination.

Erreurs fréquentes

• Oublier href pour que le texte ne soit pas un vrai hyperlien
• Utiliser « cliquez ici » ou « lien » pour chaque destination
• Chemins relatifs cassés après avoir déplacé des fichiers entre dossiers
• Fautes dans https:// ou le domaine pour les URL externes
• Mettre des espaces dans les noms de fichiers puis se demander pourquoi les liens relatifs échouent
• Imbriquer du contenu interactif sans soin (gardez les liens débutants simples : du texte dans a)

Résumé

• Les liens utilisent l’élément a avec une destination href
• Les URL absolues incluent un schéma comme https://
• Les URL relatives pointent vers d’autres fichiers de votre site
• Rédigez un texte de lien clair et descriptif pour tout le monde — y compris les technologies d’assistance
• Les chemins cassés échouent au moment de la navigation même quand les balises paraissent valides