Liens HTML : ancres, boutons, images et nouvel onglet
Guide des liens HTML
Liens HTML : ancres, liens bouton, liens image, nouvel onglet | We.Inc
Créez des liens HTML qui fonctionnent : liens d'ancre avec défilement fluide sous un en-tête sticky, nouveaux onglets, liens stylés en boutons, liens image, liens mailto, tel et de téléchargement.
Un lien HTML est un élément <a> avec un href : <a href="/pricing">See pricing</a>. Faites pointer href vers une page, vers #id pour sauter à un endroit de la page, ou vers mailto: et tel: pour lancer un e-mail ou un appel. Ajoutez target="_blank" pour un nouvel onglet, et utilisez un <button>, pas un lien, pour les actions qui modifient quelque chose.
Tous les modèles de liens dont un petit site a besoin, chacun avec du code modifiable et un résultat en direct. La démo des liens d'ancre montre le problème de l'en-tête sticky et sa correction en une ligne, et la section sur les boutons tranche la question de savoir quand un lien doit ressembler à un bouton et quand il doit en être un.
Choisissez le type de lien dont vous avez besoin dans les sections ci-dessous.
Modifiez l'exemple. Le cadre de résultat est une vraie page : les liens d'ancre font défiler et les contours de focus apparaissent quand vous appuyez sur Tab.
Copiez l'extrait et remplacez l'adresse et le texte du lien par les vôtres.
Vérifiez que le texte du lien se comprend seul, car les utilisateurs de lecteurs d'écran parcourent souvent une liste de liens sans les mots qui les entourent.
Écrivez un texte de lien qui nomme la destination, comme Télécharger le menu de printemps, et non cliquez ici. Cela aide ceux qui parcourent la page en diagonale et aide les moteurs de recherche à comprendre la page cible.
Utilisez des chemins relatifs (/contact) pour les pages de votre propre site afin que les liens continuent de fonctionner sur une adresse de prévisualisation ou un nouveau domaine.
Signalez les liens vers un nouvel onglet dans le texte, par exemple (s'ouvre dans un nouvel onglet), pour que personne ne soit surpris quand le bouton retour ne fait rien.
Gardez des id de liens d'ancre courts, en minuscules et stables. D'autres personnes les mettront en favoris et les partageront.
Questions fréquentes
Ai-je encore besoin de rel="noopener" avec target="_blank" ?
Les navigateurs actuels appliquent automatiquement le comportement noopener aux liens target="_blank", la page ouverte ne peut donc pas remonter jusqu'à la vôtre via window.opener. Ajouter rel="noopener" reste sans inconvénient et protège les très anciens navigateurs. Ajoutez aussi noreferrer si vous ne voulez pas que l'autre site voie quelle page lui a envoyé le visiteur.
Faut-il utiliser un lien ou un bouton ?
Utilisez <a href> quand le clic mène quelqu'un vers une nouvelle adresse qu'il pourrait mettre en favori ou ouvrir dans un nouvel onglet. Utilisez <button> quand le clic fait quelque chose sur la page actuelle, comme ouvrir un menu, envoyer un formulaire ou ajouter au panier. Vous pouvez styler l'un pour qu'il ressemble à l'autre.
Pourquoi mon lien d'ancre cache-t-il le titre sous mon en-tête sticky ?
Le navigateur fait défiler la cible tout en haut de la fenêtre, là où se trouve votre en-tête fixe. Ajoutez scroll-margin-top aux cibles, réglé sur la hauteur de l'en-tête plus un peu de marge, et le titre arrive juste en dessous.
Pourquoi l'attribut download ne fonctionne-t-il pas pour mon fichier ?
Les navigateurs ne respectent download que pour les fichiers de la même origine que la page, ou pour les adresses blob: et data:. Pour un fichier sur un autre domaine, le lien se contente de l'ouvrir, sauf si ce serveur envoie un en-tête Content-Disposition demandant au navigateur de l'enregistrer.
Comment ajouter un objet à un lien mailto ?
Ajoutez-le sous forme de query string : mailto:[email protected]?subject=Booking%20request&body=Hi. Les espaces et caractères spéciaux doivent être encodés en pourcentage, un espace devient donc %20.
Anatomie d'un lien
Un <a> sans href n'est qu'un espace réservé : il ne peut pas recevoir le focus au clavier et ne fait rien au clic. C'est le href qui en fait un lien. Le texte entre les balises est le nom accessible, et sur un lien image, c'est le texte alt de l'image qui joue ce rôle.
D'autres attributs affinent le lien. target choisit où il s'ouvre, rel décrit la relation avec la page cible (nofollow, noopener, noreferrer, sponsored), download demande au navigateur d'enregistrer le fichier plutôt que de l'afficher, et hreflang ou type décrivent la destination.
Boutons et liens sont des contrôles différents
Au clavier, on appuie sur Entrée pour suivre un lien, et sur Entrée ou Espace pour activer un bouton. Les lecteurs d'écran les annoncent différemment, et seuls les liens ont un menu contextuel avec Ouvrir dans un nouvel onglet. Quand un lien sert à une action, ou qu'une div sert à l'un ou l'autre, une partie de ces comportements disparaît.
Le style visuel est libre. Un lien S'inscrire dans l'en-tête peut ressembler à un bouton plein, et un bouton Supprimer dans une liste peut ressembler à du simple texte souligné. Choisissez l'élément selon ce qui se passe, puis stylez-le comme le design l'exige.
Rendre les liens accessibles
Les liens doivent être reconnaissables sans dépendre uniquement de la couleur. Un soulignement s'en charge dans le texte courant ; dans les barres de navigation, la mise en page le rend généralement évident. Gardez un contour de focus visible, et si vous remplacez celui du navigateur, assurez-vous que le nouveau a un contraste suffisant.
Évitez plusieurs liens au même texte menant à des endroits différents, comme une rangée de liens Lire la suite. Écrivez un texte distinct ou ajoutez un span visuellement masqué qui complète la phrase pour les utilisateurs de lecteurs d'écran.
Le lien de base
Adresses absolues, relatives et fragments
Les chemins relatifs sont résolus par rapport à la page courante ; un chemin qui commence par / part de la racine du site.
Liens d'ancre, défilement fluide et en-têtes sticky
Donnez un id à la cible et liez-la avec #id. scroll-behavior: smooth anime le saut, et scroll-margin-top empêche un en-tête sticky de recouvrir le titre.
Liens d'ancre sous un en-tête sticky
Cliquez sur un lien dans la barre. Chaque section arrive juste sous l'en-tête grâce à scroll-margin-top. Supprimez cette ligne pour voir le problème qu'elle résout.
Ouvrir un lien dans un nouvel onglet
target="_blank" avec une indication visible
noopener est implicite dans les navigateurs actuels mais ne coûte rien à garder. noreferrer masque en plus l'adresse de votre page à l'autre site.
Des liens qui ressemblent à des boutons, et de vrais boutons
Quel élément
Le clic…
Élément
Exemple
Mène à une autre adresse
<a href>
S'inscrire, Voir les offres, Lire le guide
Envoie un formulaire
<button type="submit">
Envoyer le message, Payer maintenant
Modifie quelque chose sur cette page
<button type="button">
Ouvrir le menu, Ajouter au panier, Afficher plus
Un lien stylé en bouton à côté d'un vrai bouton
Les deux se ressemblent. Seul le lien peut s'ouvrir dans un nouvel onglet ; seul le bouton a sa place dans l'action d'un formulaire.
Liens image
Une image comme lien
Le texte alt nomme la destination, car c'est le seul texte du lien. Ici l'image est un petit SVG intégré pour que la démo fonctionne hors ligne.
Liens e-mail, téléphone et téléchargement
mailto et tel
Écrivez les numéros de téléphone dans le href au format international, sans espaces. Le texte visible peut être formaté comme vous le souhaitez.
L'attribut download
Sa valeur, si elle est fournie, suggère un nom de fichier. Il ne s'applique qu'aux fichiers de votre propre origine ou aux adresses blob: et data:.