L'élément <a> (pour ancre ou anchor en anglais) définit un hyperlien vers un autre endroit de la même page ou vers une autre page sur le Web.

Attributs

Cet élément inclut les attributs universels.

download HTML5
Cet attribut indique au navigateur de télécharger l'objet vers lequel pointe l'URL plutôt que d'y diriger l'utilisateur. Cela ouvre une invite pour enregistrer la cible du lien comme un fichier local. Si l'attribut a une valeur, le navigateur doit l'interpréter comme le nom de fichier par défaut pour l'invite qui s'ouvre (l'utilisateur pourra bien entendu modifier le nom de fichier avant de cliquer sur « Enregistrer »). Il n'y a aucune limitation sur les valeurs autorisées, mais il faut se souvenir ici que la plupart des systèmes de fichiers ont des limitations concernant la ponctuation dans les noms de fichier, et que les navigateurs procèderont sûrement à des ajustements en conséquence (par exemple, les barres obliques et barres obliques inversées seront sans doute converties en tirets bas).

Note :

  • Bien que les URL HTTPS doivent provenir de la même origine, les URL blob:, data: et filesystem: peuvent être utilisées afin de simplifier le téléchargement de contenus générés par un programme JavaScript (ex. : une image générée automatiquement).
  • Si l'en-tête HTTP Content-Disposition est présent et fournit un nom de fichier différent que celui fourni par l'attribut alors ce sera l'en-tête HTTP qui aura la priorité sur l'attribut.
  • Si l'attribut est présent et que Content-Disposition: vaut inline, Firefox donnera la priorité à l'en-tête, Chrome donnera la priorité à l'attribut.
  • Cet attribut est uniquement respecté pour les liens des ressources de la même origine.
href
L'attribut href indique la cible du lien sous la forme d'une URL ou d'un fragment d'URL. Un fragment d'URL est un nom précédé par un dièse (#), qui indique une cible interne au document (un ID). Les URL ne se limitent pas au documents web sur HTTP. Les URL peuvent utiliser n'importe quel protocole supporté par le navigateur. Par exemple, file, ftp et mailto fonctionnent avec la plupart des agents-utilisateur.

Note : Le fragment spécial "top" peut être utilisé pour créer un lien de retour vers le haut de la page ; par exemple <a href="#top">Retourner en haut</a>. Ce comportement est défini par HTML5.

hreflang
Cet attribut indique la langue de la ressource liée. Il est purement indicatif. Les valeurs permises pour HTML5 sont définies par BCP47 et pour HTML 4 par la RFC1766. Cet attribut ne doit être utilisé que si l'attribut href est présent.
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 suit le lien. Cet attribut est généralement utilisé pour tracer un utilisateur.
referrerpolicy
Une chaîne de caractères qui indique le référent à utiliser lors de la récupération de la ressource :
  • 'no-referrer' indique que l'en-tête Referer ne sera pas envoyé.
  • 'no-referrer-when-downgrade' indique que l'en-tête Referer ne sera pas envoyé lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par défaut de l'agent utilisateur si aucune autre politique n'est spécifiée.
  • 'origin' indique que le référent sera l'origine de la page (ce qui correspond au schéma utilisé, à l'hôte et au port).
  • 'origin-when-cross-origin' indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyée. Lorsqu'on navigue sur la même origine, le chemin de la ressource sera inclus dans le référent.
  • 'strict-origin-when-cross-origin' fonctionne comme origin-when-cross-origin mais les en-têtes d'origine sont envoyés via HTTPS plutôt que par HTTP.
  • 'unsafe-url' indique que le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considéré comme sûr car il peut laisser fuiter des origines et des 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
Cet attribut indique où afficher la ressource liée. Il s'agit du nom, ou du mot-clé, d'un contexte de navigation (par exemple, un onglet, une fenêtre, ou une <iframe>). Les mots-clés suivants ont un sens particulier :
  • _self : charge la réponse dans le contexte de navigation courant. Il s'agit de la valeur par défaut quand l'attribut n'est pas renseigné.
  • _blank : charge la réponse dans un nouveau contexte de navigation.
    • Ajouter un lien vers une autre page en utilisant target="_blank" exécutera la page dans le même processus que la page courante. Si la nouvelle page consomme de nombreuses ressources, les performances de la page courante pourront en pâtir. Pour éviter ce problème, on pourra utiliser rel="noopener".
  • _parent : charge la réponse dans le <frameset> HTML4 parent de la frame courante ou dans le contexte de navigation HTML5 parent relativement au contexte courant). S'il n'y a pas de parent, l'option se comporte de la même façon que _self.
  • _top : En HTML4 : charge la réponse dans la fenêtre originale, annulant toutes les autres frames. En HTML5 : charge la réponse dans le contexte de navigation de plus haut niveau (c'est à dire, le contexte de navigation parent par rapport à l'actuel, et qui n'a lui-même aucun parent). S'il n'y a pas de parent, l'option se comporte de la même façon que _self.

Lorsque target est utilisé, on pourra ajouter rel="noopener noreferrer" afin d'éviter la fuite de données via l'API Window.opener.

type
Cet attribut indique le type de média de la cible du lien, sous la forme d'un type MIME. Généralement, il s'agit d'une information purement indicative.

Attributs obsolètes

charset Obsolète depuis HTML5
Cet attribut définit le jeu de caractères de la ressource liée. La valeur est une liste de jeux de caractères (défini dans RFC 2045) séparés par des espaces ou des virgules. La valeur par défaut est ISO-8859-1.

Note d'utilisation : Cet attribut est obsolète en HTML5, et ne doit plus être utilisé par les auteurs. Pour obtenir le même effet, utiliser l'entête HTTP Content-Type sur la ressource liée.

coords HTML 4 seulement, Obsolète depuis HTML5
Pour utiliser avec des formes géométriques. Cet attribut utilise une liste de nombres séparés par des virgules, définissant les coordonnées de l'objet sur la page.
name HTML 4 seulement, Obsolète depuis HTML5
Cet attribut est utilisé pour définir une ancre cible au sein de la page. La valeur de name est similaire à la valeur de l'attribut global id, et doit être un identifiant alphanumérique unique au document. Sous la spécification HTML 4.01, id et name peuvent être tous les deux utilisés sur un élément <a> s'ils ont des valeurs identiques.

Note d'utilisation : Cet attribut est obsolète en HTML5, il faut utiliser l'attribut global id à la place.

rev HTML 4 seulement, Obsolète depuis HTML5
L'attribut indique un lien inversé : la relation inverse de l'attribut rel. Il est utile pour indiquer l'origine d'un objet, tel que l'auteur d'un document.

Note : La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut rev comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.

shape HTML 4 seulement, Obsolète depuis HTML5
Cet attribut est utilisé pour définir une zone cliquable pour un lien associé à une image, pour créer une image map. Les valeurs pour cet attribut sont circle, default, polygon, et rect. Le format de l'attribut coords dépend de la valeur de shape. Pour circle, la valeur est x,y,rx et y sont les coordonnées en pixel pour le centre du cercle et r est le rayon du cercle en pixel. Pour rect, l'attribut coords doit être x,y,w,h. Les valeurs x,y définissent le coin supérieur gauche du rectangle, pendant w et h définissent respectivement la largeur et la hauteur. Une valeur polygon pour shape nécessite les valeurs x1,y1,x2,y2,... pour coords. Chaque paire de x,y définissent un point du polygone, avec les points successifs joints par des lignes droites, et le dernier point joint au premier. La valeur default pour shape nécessite que la totalité de la zone, habituellement une image, soit utilisée.
Note : Il est préférable d'utiliser l'attribut usemap de l'élément <img> et l'élément <map> associé, pour définir des zones d'actions, à la place de l'attribut shape.

Exemples

Hyperlien vers une ressource externe

<a href="https://www.mozilla.com/">
Lien externe
</a>

Résultat

Créer une image cliquable

Ce petit exemple utilise une image qui redirige vers la page d'accueil de MDN. La page d'accueil s'ouvrira dans un nouveau contexte de navigation, c'est une nouvelle page ou un nouvel onglet.

<a href="https://developer.mozilla.org/en-US/" target="_blank">
 <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" />
</a>

Résultat

Créer un lien vers un numéro de téléphone

Lorsqu'on utilise des appareils connectés à des téléphones, il peut être pratique d'utiliser des liens avec le schéma tel: :

<a href="tel:+615701564">+6 15 70 15 64</a>

Pour plus de détails sur ce schéma, se référer à la RFC RFC 3966.

Créer un lien pour écrire un e-mail

Il est courant de créer des boutons ou des hyperliens qui vont ouvrir l'application de messagerie de l'utilisateur pour lui permettre d'envoyer un nouveau message. Cela est possible en utilisant un lien mailto. Voici un exemple simple:

<a href="mailto:personne@mozilla.org">Envoyer un courriel à personne</a>

Cela produit comme résultat, un lien qui ressemble à ceci: Envoyer un courriel à personne.
Pour plus de détails sur le schéma URL de mailto, comme comment inclure un sujet, un corps de texte, ou tout autre contenu prédéterminé, voir les liens Emails ou RFC 6068.

Utiliser l'attribut download pour sauvegarder un canvas en PNG

Si on souhaite permettre à un utilisateur de télécharger un canvas HTML comme une image, on peut créer un lien avec un attribut download et lui associer les données liées au <canvas> pour construire une URL de fichier.

var link = document.createElement('a');
link.textContent = 'Télécharger une image';
link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "maToile.png";
}, false);
document.body.appendChild(link);

Vous pouvez voir le résultat de ce code ici https://jsfiddle.net/codepo8/V6ufG/2/

Notes

  • Les raccourcis clavier suivants sont réservés par deux des principaux navigateurs, et ne doivent pas être utilisés comme valeur pour accesskey : a, c, e, f, g, h, v, flèche droite et flèche gauche.
  • HTML 3.2 définit uniquement les attributs name, href, rel, rev, et title.
  • L'attribut target n'est pas défini dans les navigateurs qui ne supportent pas les frames, tel que les navigateurs de la génération Netscape 1. De plus, target n'est pas autorisé dans les variantes stricts de XHTML, mais limité à frameset et transitional.

Sécurité et vie privée

Bien que l'élément <a> soit la plupart du temps utilisé innocemment, les informations qu'il peut transporter peuvent avoir des effets indésirables sur la sécurité et sur la vie privée des utilisateurs. Pour plus d'informations, voir cet article sur l'en-tête Referer et les problématiques qu'il soulève.

Accessibilité

É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égiera 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 le liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produira lorsqu'on cliquera 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 confusent 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

<a target="_blank" href="https://www.wikipedia.org/">Wikipédia (s'ouvre dans une nouvelle fenêtre)</a>

Lien vers une ressource non-HTML

<a target="_blank" href="2017-rapport-annuel.ppt">Rapport annuel 2017 (PowerPoint)</a>

Si une icône est utilisée en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien une description alternative.

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.

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.

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.

Résumé technique

Catégories de contenu Contenu de flux, contenu phrasé, contenu interactif, contenu tangible.
Contenu autorisé Contenu transparent qui contient du contenu de flux (mais pas de contenu interactif) ou du contenu phrasé.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu phrasé ou tout élément qui accepte du contenu de flux. (un élément <a> ne peut pas avoir d'élément parent qui soit également un élément <a>).
Rôles ARIA autorisés button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab, treeitem
Interface DOM HTMLAnchorElement

Spécifications

Spécification État Commentaires
Referrer Policy
La définition de 'referrer attribute' dans cette spécification.
Candidat au statut de recommandation Ajout de l'attribut referrer.
HTML Living Standard
La définition de '<a>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<a>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<a>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet Oui
Notes
Support complet Oui
Notes
Notes Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
charset
Obsolète
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
coords
Obsolète
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support ? — 58
Notes
Aucun support ? — 58
Notes
Notes You can no longer nest an <a> element inside a <map> element to create a hotspot region — coords and shape attribute support removed.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support ? — 58
Notes
Aucun support ? — 58
Notes
Notes You can no longer nest an <a> element inside a <map> element to create a hotspot region — coords and shape attribute support removed.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
downloadChrome Support complet 14Edge Support complet 18
Support complet 18
Support partiel 13
Notes
Notes Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (bug 7160092).
Notes Edge 17 or older didn't follow the attributes' value to determine filename (bug 7260192).
Firefox Support complet 20IE Aucun support NonOpera Support complet 15Safari Support complet 10.1WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 20Opera Android ? Safari iOS Aucun support NonSamsung Internet Android ?
hrefChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
hreflangChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
name
Obsolète
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
ping
Expérimentale
Chrome Support complet OuiEdge Aucun support NonFirefox Support complet Oui
Désactivée
Support complet Oui
Désactivée
Désactivée This feature is behind the browser.send_pings preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet OuiSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet Oui
Désactivée
Support complet Oui
Désactivée
Désactivée This feature is behind the browser.send_pings preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Aucun support NonSamsung Internet Android ?
referrerpolicyChrome Support complet 51Edge Aucun support NonFirefox Support complet 50IE Aucun support NonOpera Support complet 38Safari Support complet 11.1WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Aucun support NonFirefox Android Support complet 50Opera Android Support complet 38Safari iOS Aucun support NonSamsung Internet Android Support complet 7.2
relChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
rev
Obsolète
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
shape
Obsolète
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support ? — 58
Notes
Aucun support ? — 58
Notes
Notes You can no longer nest an <a> element inside a <map> element to create a hotspot region — coords and shape attribute support removed.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support ? — 58
Notes
Aucun support ? — 58
Notes
Notes You can no longer nest an <a> element inside a <map> element to create a hotspot region — coords and shape attribute support removed.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
targetChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
typeChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Clic et focus

Lorsqu'on clique sur un élément <a>, cela passe le focus à l'élément. Ce comportement varie en fonction des navigateurs et systèmes d'exploitation.

Est-ce que le clic sur <a> entraîne le focus ?
Navigateurs de bureau Windows 8.1 OS X 10.9
Firefox 30.0 Oui Oui
Chrome ≥39
(Chromium bug 388666)
Oui Oui
Safari 7.0.5 N/A Seulement s'il a un tabindex
Internet Explorer 11 Oui N/A
Presto (Opera 12) Oui Oui
Est-ce que toucher un élément <a> entraîne le focus ?
Navigateurs mobiles iOS 7.1.2 Android 4.4.4
Safari Mobile Seulement s'il a un tabindex N/A
Chrome 35 ??? Seulement s'il a un tabindex

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,