Élément HTML <a> : l'élément d'ancre

Exemple interactif

Attributs

Cet élément inclut les attributs universels.

attributionsrc

Définit que vous souhaitez que le navigateur envoie un en-tête Attribution-Reporting-Eligible. Côté serveur, cela sert à déclencher l'envoi d'un en-tête Attribution-Reporting-Register-Source dans la réponse, afin d'enregistrer une source d'attribution basée sur la navigation.

Le navigateur stocke les données de la source associée à la source d'attribution basée sur la navigation (telles que fournies dans l'en-tête de réponse Attribution-Reporting-Register-Source) lorsque l'utilisateur·ice clique sur le lien. Voir l'API Attribution Reporting pour plus de détails.

Il existe deux versions de cet attribut :

• Booléen, c'est-à-dire, uniquement le nom attributionsrc. Cela indique que vous souhaitez que l'en-tête Attribution-Reporting-Eligible soit envoyé au même serveur que celui indiqué par l'attribut href. Cela convient lorsque vous gérez l'enregistrement de la source d'attribution sur le même serveur.

• Valeur contenant une ou plusieurs URL, par exemple :

  html

  attributionsrc="https://a.example/register-source https://b.example/register-source"

  Ceci est utile dans les cas où la ressource demandée n'est pas sur un serveur que vous contrôlez, ou si vous souhaitez simplement gérer l'enregistrement de la source d'attribution sur un autre serveur. Dans ce cas, vous pouvez définir une ou plusieurs URL comme valeur de attributionsrc. Lorsque la requête de ressource a lieu, l'en-tête Attribution-Reporting-Eligible est envoyé à l'(aux) URL(s) définie(s) dans attributionsrc en plus de l'origine de la ressource. Ces URL peuvent alors répondre avec Attribution-Reporting-Register-Source pour compléter l'enregistrement.

  Note : Définir plusieurs URL signifie que plusieurs sources d'attribution peuvent être enregistrées sur la même fonctionnalité. Par exemple, vous pouvez avoir différentes campagnes dont vous souhaitez mesurer le succès, ce qui implique de générer différents rapports sur différentes données.

Les éléments HTML <a> ne peuvent pas être utilisés comme déclencheurs d'attribution, uniquement comme sources.

download

Fait en sorte que le navigateur traite l'URL liée comme un téléchargement. Peut être utilisé avec ou sans valeur filename :

• Sans valeur, le navigateur propose un nom de fichier/extension, généré à partir de diverses sources :

  • L'en-tête HTTP Content-Disposition
  • Le segment final dans l'URL : path
  • Le type MIME (depuis l'en-tête Content-Type, le début d'une URL data:, ou Blob.type pour une URL blob:)

• filename : définir une valeur la suggère comme nom de fichier. Les caractères / et \ sont convertis en caractères de soulignement (_). Les systèmes de fichiers peuvent interdire d'autres caractères dans les noms de fichiers, les navigateurs ajustent donc le nom suggéré si nécessaire.

href

L'URL vers laquelle pointe l'hyperlien. Les liens ne sont pas limités aux URL basées sur HTTP : ils peuvent utiliser n'importe quel schéma d'URL pris en charge par les navigateurs :

• Numéros de téléphone avec les URL tel:
• Adresses électroniques avec les URL mailto:
• Messages SMS avec les URL sms:
• Code exécutable avec les URL javascript:
• Bien que les navigateurs web puissent ne pas prendre en charge d'autres schémas d'URL, les sites web le peuvent avec registerProtocolHandler()

D'autres fonctionnalités des URL permettent de localiser des parties spécifiques de la ressource :

• Sections d'une page avec des fragments de document
• Portions de texte spécifiques avec les fragments de texte
• Parties de fichiers médias avec des fragments de médias

hreflang

Donne des indications sur le langage humain de l'URL liée. Aucune fonctionnalité intégrée. Les valeurs autorisées sont les mêmes que l'attribut universel lang.

ping

Contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes POST avec le corps PING lorsque l'utilisateur·ice suit le lien. Cet attribut est généralement utilisé pour tracer un·e utilisateur·ice.

interestfor

Définit l'élément <a> comme un invocateur d'intérêt (interest invoker). Sa valeur est l'id de l'élément cible, qui est affecté d'une manière ou d'une autre (généralement affiché ou masqué) lorsque l'intérêt est montré ou perdu sur l'élément invocateur (par exemple au survol/fin de survol ou à la sélection/perte de sélection). Voir Utilisation des invocateurs d'intérêt pour plus de détails et d'exemples.

referrerpolicy

Détermine la quantité d'informations du référent à envoyer lors du suivi du lien.

• no-referrer : L'en-tête Referer ne est pas envoyé.
• no-referrer-when-downgrade : L'en-tête Referer ne est pas envoyé vers des origines sans TLS (HTTPS).
• origin : Le référent envoyé est limité à l'origine de la page référente : son schéma, host, et port.
• origin-when-cross-origin : Le référent envoyé à d'autres origines est limité au schéma, à l'hôte et au port. Les navigations sur la même origine incluent toujours le chemin.
• same-origin : Un référent est envoyé pour la même origine, mais les requêtes inter-origines ne contiennent aucune information de référent.
• strict-origin : N'envoie l'origine du document comme référent que lorsque le niveau de sécurité du protocole reste le même (HTTPS→HTTPS), mais ne l'envoie pas vers une destination moins sécurisée (HTTPS→HTTP).
• strict-origin-when-cross-origin (par défaut) : Envoie une URL complète lors d'une requête de même origine, n'envoie que l'origine lorsque le niveau de sécurité du protocole reste le même (HTTPS→HTTPS), et n'envoie aucun en-tête vers une destination moins sécurisée (HTTPS→HTTP).
• unsafe-url : Le référent inclut l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur·ice). Cette valeur est non sécurisée, car elle divulgue les origines et les chemins de ressources protégées par TLS vers des origines non sécurisées.

rel

Cet attribut indique la relation entre la cible du lien et l'objet faisant le lien. La valeur est une liste de types de liens séparés par des espaces.

target

Où afficher l'URL liée, comme nom d'un contexte de navigation (un onglet, une fenêtre ou un <iframe>). Les mots-clés suivants ont des significations spéciales pour l'endroit où charger l'URL :

• _self : le contexte de navigation actuel. (Par défaut)
• _blank : généralement un nouvel onglet, mais les utilisateur·ice·s peuvent configurer les navigateurs pour ouvrir une nouvelle fenêtre à la place.
• _parent : le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, il se comporte comme _self.
• _top : le contexte de navigation le plus haut (le contexte « le plus haut » qui est un ancêtre du contexte actuel). S'il n'a aucun ancêtre, il se comporte comme _self.
• _unfencedTop : Autorise les cadres protégés intégrés à naviguer vers la fenêtre de niveau supérieur (c'est-à-dire à dépasser la racine du cadre protégé, contrairement aux autres destinations réservées). Notez que la navigation fonctionne toujours si cela est utilisé en dehors d'un contexte de cadre protégé, mais cela n'agit pas comme un mot-clé réservé.

type

Donne des indications sur le format de l'URL liée avec un type MIME. Aucune fonctionnalité intégrée.

Attributs obsolètes

charset

Fait allusion aux encodages des caractères de l'URL liée.

coords

Utilisé avec l'attribut shape. Une liste de coordonnées séparées par des virgules.

name

Était nécessaire pour définir un emplacement cible possible dans une page. En HTML 4.01, id et name pouvaient tous deux être utilisés sur <a>, pour autant qu'ils aient des valeurs identiques.

rev

Définissait un lien inverse ; l'opposé de l'attribut rel. Déprécié pour avoir été très confus.

shape

La forme de la région de l'hyperlien dans une carte d'image.

Accessibilité

Texte de lien fort

Le contenu d'un lien doit indiquer où va le lien, même hors contexte.

Texte inaccessible, lien faible

Une erreur tristement courante consiste à ne relier que les mots « cliquez ici » ou « ici » :

Résultat

Texte accessible, lien fort

Heureusement, il s'agit d'une solution facile, et elle est en fait plus courte que la version inaccessible !

Résultat

Les logiciels d'assistance disposent de raccourcis permettant de lister tous les liens d'une page. Cependant, un texte de lien fort profite à tous les utilisateur·ice·s — le raccourci « liste de tous les liens » imite la façon dont les utilisateur·ice·s voyants parcourent rapidement les pages.

Évènements onclick

Les ancres sont souvent détournées avec l'évènement onclick afin de créer des pseudo-boutons avec l'attribut href qui vaut "#" ou javascript:void(0) pour empêcher le rafraîchissement de la page.

Ces valeurs produisent des résultats inadéquats lorsqu'on copie/déplace des liens, qu'on ouvre des liens dans de nouveaux onglets ou fenêtres, qu'on ajoute des marque-pages ou lorsque le JavaScript est encore en train d'être téléchargé. De plus, la sémantique exposée par le document, utilisée par les outils d'assistance, est incorrecte.

Dans ces cas, on privilégie plutôt l'utilisation d'un bouton <button>. De façon générale, une ancre ne doit être utilisée que pour naviguer vers une URL correcte.

Liens externes, liens vers des ressources non-HTML

Les liens qui ouvrent un nouvel onglet ou une nouvelle fenêtre grâce à target="_blank", ainsi que les liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produit lorsqu'on clique sur ces liens.

Les personnes qui utilisent des outils d'assistance à la navigation comme des lecteurs d'écran et/ou qui souffrent de troubles de la vision, cognitifs peuvent être confuses lorsqu'un nouvel onglet, fichier ou une nouvelle fenêtre s'ouvre de façon inattendue. Les anciennes versions des lecteurs d'écran peuvent également ne pas annoncer ce comportement.

Lien vers un nouvel onglet ou une nouvelle fenêtre

Résultat

Lien vers une ressource non-HTML

Résultat

• WebAIM : Liens et hypertexte (angl.)
• Comprendre les règles WCAG 3.2
• G200 : Ouvrir de nouvelles fenêtres et onglets à partir d'un lien lorsque c'est strictement nécessaire - WCAG 2.0 (angl.)
• G201 : Fournir un avertissement aux ·ice· lorsqu'ils ouvrent une nouvelle fenêtre WCAG 2.0 (angl.)

Skip links — liens pour l'accès rapide au contenu

Un skip link (aussi appelé skipnav en anglais) est un élément a qui est placé le plus près possible de l'élément <body> et qui renvoie au début du contenu principal de la page.

Résultat

Ce lien permet alors de passer plus facilement le contenu qui se répète sur l'ensemble des pages (l'en-tête et la barre de navigation par exemple).

Les skip links sont particulièrement utiles pour les personnes qui naviguent à l'aide d'outils d'assistance (commande vocale, stylets buccal ou frontal) pour lesquels devoir passer par des liens répétés peut freiner la lecture du document.

• WebAIM : Liens de "navigation rapide" Links (angl.)
• Comment utiliser les skip links - The A11Y Project (angl.)
• Comprendre les règles WCAG 2.4
• Understanding Success Criterion 2.4.1 - W3C Understanding WCAG 2.0 (angl.)

Dimensionnement et proximité

La taille

Les éléments interactifs tels que les liens doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilite la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 pixels CSS (angl.).

Les liens en texte seul dans le contenu en prose sont exemptés de cette exigence, mais il est toujours bon de s'assurer qu'il y a suffisamment de texte hyperlié pour être facilement activé.

• Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (angl.)
• Taille des cibles et critère 2.5.5, (angl.) d'Adrian Roselli (an anglais)
• Test rapide : cibles tactiles suffisamment grande - Projet A11Y (angl.)

La proximité

Lorsque plusieurs contenus interactifs (y compris les ancres) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.

Un tel espacement peut être obtenu grâce à la propriété CSS margin.

• Les tremblements de la main et le problème du bouton géant - Axess Lab (angl.)

Exemples

Créer un lien vers une URL absolue

HTML

Résultat

Créer des liens vers des URL relatives

HTML

Résultat

Créer un lien vers un élément de la même page

Résultat

Créer un lien avec une adresse électronique

Pour créer des liens qui s'ouvrent dans le programme de messagerie de l'utilisateur·ice, pour lui permettre d'envoyer un nouveau message, utilisez le schéma mailto: :

Résultat

Pour plus de détails sur les URL mailto:, comme l'inclusion d'un sujet ou d'un corps de message, voir Liens de courrier électronique ou RFC 6068.

Créer un lien avec les numéros de téléphone

Résultat

tel: le comportement du lien varie en fonction des capacités du périphérique :

• Les appareils cellulaires composent automatiquement le numéro.
• La plupart des systèmes d'exploitation disposent de programmes permettant de passer des appels, comme Skype ou FaceTime.
• Les sites web peuvent passer des appels téléphoniques avec registerProtocolHandler, comme web.skype.com.
• Les autres comportements comprennent l'enregistrement du numéro dans les contacts, ou l'envoi du numéro à un autre appareil.

Voir RFC 3966 pour la syntaxe, les fonctionnalités supplémentaires et d'autres détails sur le schéma URL tel:.

Utilisation de l'attribut de téléchargement pour enregistrer un <canvas> au format PNG

Pour enregistrer le contenu d'un élément <canvas> sous forme d'image, vous pouvez créer un lien avec un attribut download et les données du canvas sous forme d'une URL data: :

Exemple d'application de peinture avec lien de sauvegarde

HTML CSS JavaScript Résultat

Sécurité et vie privée

Les éléments <a> peuvent avoir des conséquences sur la sécurité et la vie privée des utilisateur·ice·s. Voir Referer en-tête : problèmes de confidentialité et de sécurité pour plus d'informations.

L'utilisation de target="_blank" sans rel="noreferrer" ni rel="noopener" rend le site vulnérable aux attaques exploitant l'API window.opener. Notez toutefois que, dans les versions récentes des navigateurs, définir target="_blank" fournit implicitement la même protection que rel="noopener". Voir la compatibilité des navigateurs pour plus de détails.

Résumé technique

Catégories de contenu Contenu autorisé Omission de balises Parents autorisés Rôle ARIA implicite Rôles ARIA autorisés Interface DOM

Contenu du flux, contenu phrasé, contenu interactif, contenu tangible.

Transparent, contenant soit le contenu du flux (à l'exclusion du contenu interactif), soit contenu phrasé.

Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.

Tout élément qui accepte la formulation du contenu, ou tout élément qui accepte le contenu du flux, mais pas les autres éléments <a>.

link lorsque l'attribut href est présent, sinon generic

Lorsque l'attribut href est présent : button checkbox menuitem menuitemcheckbox menuitemradio option radio switch tab treeitem Lorsque l'attribut href n'est pas présent : tout

HTMLAnchorElement

Spécifications

Spécification

HTML # the-a-element

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Voir aussi

• L'élément <link> est similaire à l'élément <a>, mais représente des hyperliens de métadonnées invisibles pour les utilisateur·ice·s.
• La pseudo-classe CSS :link qui correspond aux éléments <a> dont l'attribut href contient une URL qui n'a pas encore été visitée par l'utilisateur·ice.
• La pseudo-classe CSS :visited qui correspond aux éléments <a> dont l'attribut href contient une URL déjà visitée par l'utilisateur·ice.
• La pseudo-classe CSS :any-link qui correspond aux éléments <a> ayant un attribut href.
• Les fragments de texte sont des instructions ajoutées aux URL permettant de créer un lien vers un texte spécifique d'une page, sans qu'un identifiant soit nécessaire.