<a>

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.

<a href="https://developer.mozilla.org/">MDN</a>

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 converties en tirets bas).

Note :

• 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, soit une URL, soit 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.

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.
• '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.
• _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.

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 indentiques.

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.

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,r où x 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 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 schema 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.innerHTML = '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.

Notes relatives à l'accessibilité

Les ancres sont souvent utilisées de façon abusive avec l'événement onclick afin de créer des pseudo-boutons en définissant l'attribut href avec "#" ou "javascript:void(0)" afin d'empêcher le rafraîchissement de la page. Ces valeurs entraînent des comportements inattendus lorsqu'on copie ou qu'on glisse les liens, qu'on les ouvre dans un nouvel onglet ou dans une nouvelle fenêtre ou lorsque JavaScript est désactivé. La sémantique portée par ces éléments est également incorrecte et empêche les outils d'assistance (tels que les lecteurs d'écran) de fonctionner correctement. Pour ces raisons, on recommande d'utiliser un élément <button> afin de représenter un bouton. Une ancre ne doit être utilisée qu'avec une URL appropriée.

Spécifications

Compatibilité des navigateurs

[1] À partir de Gecko 41 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38), un élément <a> sans attribut href n'est plus classifié comme du contenu interactif. Cliquer sur un tel élément au sein d'un élément <label> activera le contenu étiqueté (bug 1167816).

[2] Implémentée mais derrière une préférence.

[3] Le téléchargement d'URI de données provoquait un plantage d'Edge avant la version v14.14357.

[4] Prise en charge sans préférence depuis la version 51.

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.

Voir aussi

• Les autres éléments ayant une sémantique textuelle : <abbr>, <em>, <strong>, <small>, <cite>, <q>, <dfn>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <b>, <i>, <mark>, <ruby>, <rp>, <rt>, <bdo>, <span>, <br>, <wbr>