L'élémentHTML<a> (ou élément d'ancre), avecson attributhref, crée un hyperlien vers des pages web, des fichiers, des adresses e-mail, des emplacements dans la même page ou toute autre ressource accessible par une URL.

Le contenu de chaque<a> doit indiquer la destination du lien. Si l'attributhref est présent, appuyer sur la touche Entrée lorsque l'élément<a> est sélectionné l'active.

Exemple interactif

<p>Vous pouvez contacter Michaël&nbsp;:</p><ul>  <li><a href="https://exemple.fr">Site web</a></li>  <li><a href="mailto:m.bluth@exemple.fr">Courriel</a></li>  <li><a href="tel:+123456789">Téléphone</a></li></ul>

li {  margin-bottom: 0.5rem;}

Attributs

Cet élément inclut lesattributs universels.

attributionsrcExpérimental

Définit que vous souhaitez que le navigateur envoie un en-têteAttribution-Reporting-Eligible. Côté serveur, cela sert à déclencher l'envoi d'un en-têteAttribution-Reporting-Register-Source dans la réponse, afin d'enregistrer unesource 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éponseAttribution-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 nomattributionsrc. Cela indique que vous souhaitez que l'en-têteAttribution-Reporting-Eligible soit envoyé au même serveur que celui indiqué par l'attributhref. 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-sourcehttps://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 deattributionsrc. Lorsque la requête de ressource a lieu, l'en-têteAttribution-Reporting-Eligible sera envoyé à l'(aux) URL(s) spécifiée(s) dansattributionsrc en plus de l'origine de la ressource. Ces URL peuvent alors répondre avecAttribution-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 valeurfilename :

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

  • L'en-tête HTTPContent-Disposition
  • Le segment final dans l'URL :path
  • Letype MIME (depuis l'en-têteContent-Type, le début d'une URLdata:, ouBlob.type pour une URLblob:)

• 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 ajusteront donc le nom suggéré si nécessaire.

Note :

• download ne fonctionne que pourles URLs de même origine, ou les schémasblob: etdata:.
• Le comportement du téléchargement varie selon le navigateur, les paramètres utilisateur·ice·s et d'autres facteurs. L'utilisateur·ice peut être invité·e avant le début du téléchargement, ou le fichier peut être enregistré automatiquement, ou il peut s'ouvrir automatiquement, soit dans une application externe, soit dans le navigateur lui-même.
• Si l'en-têteContent-Disposition comporte des informations différentes de celles de l'attributdownload, le comportement résultant peut différer :
  • Si l'en-tête spécifie unnom de fichier, il a priorité sur un nom de fichier spécifié dans l'attributdownload.
  • Si l'en-tête spécifie une disposition deinline, Chrome et Firefox donnent la priorité à l'attribut et le traitent comme un téléchargement. Les anciennes versions de Firefox (avant 82) donnent la priorité à l'en-tête et affichent le contenu en ligne.

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 URLtel:
• Adresses électroniques avec les URLmailto:
• Messages SMS avec les URLsms:
• Code exécutable avec les URL#"/fr/docs/Web/API/Navigator/registerProtocolHandler">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 lesfragments 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 quel'attribut globallang.

ping

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

referrerpolicy

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

• no-referrer : L'en-têteReferer ne sera pas envoyé.
• no-referrer-when-downgrade : L'en-têteReferer ne sera pas envoyé vers desorigines sansTLS (HTTPS).
• origin : Le référent envoyé sera limité à l'origine de la page référente : sonschéma,host, etport.
• origin-when-cross-origin : Le référent envoyé à d'autres origines sera limité au schéma, à l'hôte et au port. Les navigations sur la même origine incluront toujours le chemin.
• same-origin : Un référent sera envoyé pour lamême origine, mais les requêtes inter-origines ne contiendront 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 inclura l'origineet le chemin (mais pas lefragment, lemot de passe ou lenom d'utilisateur).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 detypes de liens séparés par des espaces.

target

Où afficher l'URL liée, comme nom d'uncontexte 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 utilisateurs 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 lescadres 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 fonctionnera toujours si cela est utilisé en dehors d'un contexte de cadre protégé, mais cela n'agira pas comme un mot-clé réservé.

Note :Définirtarget="_blank" sur les éléments<a> fournit implicitement le même comportementrel que définirrel="noopener" qui ne définit paswindow.opener. Voir lacompatibilité des navigateurs pour le support.

type

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

Attributs obsolètes

charsetObsolète

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

Note :Cet attribut est déprécié etne doit pas être utilisé par les auteur·ice·s. Utilisez l'en-tête HTTPContent-Type sur l'URL liée.

coordsObsolète

Utilisé avecl'attributshape. Une liste de coordonnées séparées par des virgules.

nameObsolète

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

Note :Utilisez l'attribut universelid à la place.

revObsolète

Spécifiait un lien inverse ; l'opposé del'attributrel. Déprécié pour avoir été très confus.

shapeObsolète

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

Note :Utilisez plutôt l'élément<area> pour les cartes d'images.

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 » :

<p>En savoir plus sur nos produits <a href="/products">ici</a>.</p>

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 !

<p>En savoir plus <a href="/products">à propos de nos produits</a>.</p>

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 utilisateurs — le raccourci « liste de tous les liens » imite la façon dont les utilisateurs voyants parcourent rapidement les pages.

Évènementsonclick

Les ancres sont souvent détournées avec l'évènementonclick afin de créer des pseudo-boutons avec l'attributhref qui vaut"#" ou#"/fr/docs/Web/HTML/Reference/Elements/button"><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 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 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

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

Résultat

Lien vers une ressource non-HTML

<p>  <a href="https://www.wikipedia.org/">    Wikipédia    <img src="new-tab.svg" width="14" alt="(s'ouvre dans un nouvel onglet)" />  </a>  <br />  <a href="2017-rapport-annuel.ppt">    Rapport annuel 2017    <img src="powerpoint.svg" width="14" alt="(fichier PowerPoint)" />  </a></p><p>  <a href="https://www.wikipedia.org/">    Wikipédia    <img      src="missing-icon.svg"      width="14"      alt="(s'ouvre dans un nouvel onglet)" />  </a>  <br />  <a href="2017-rapport-annuel.ppt">    Rapport annuel 2017    <img src="missing-icon.svg" width="14" alt="(fichier PowerPoint)" />  </a></p>

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 utilisateurs lorsqu'ils ouvrent une nouvelle fenêtre WCAG 2.0(angl.)

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

Unskip link (aussi appeléskipnav en anglais) est un élémenta 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.

<body>  <a href="#content">Skip to main content</a>  <header>…</header>  <main><!-- Le lien "skip" renvoie vers ici --></main></body>

.skip-link {  position: absolute;  top: -3em;  background: white;}.skip-link:focus {  top: 0;}

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

Lesskip 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 lesskip 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 facilitera 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 44x44pixels 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é CSSmargin.

• 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

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

Résultat

Créer des liens vers des URL relatives

HTML

<a href="//example.com">URL relative au schéma</a><a href="/fr/docs/Web/HTML">URL relative à l'origine</a><a href="p">URL relative au répertoire</a><a href="./p">URL relative au répertoire</a><a href="../p">URL relative au répertoire parent</a>

a {  display: block;  margin-bottom: 0.5em;}

Résultat

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

<!-- <a> élément liens vers la section ci-dessous --><p><a href="#section_further_down"> Passez à la rubrique ci-dessous </a></p><!-- Rubrique à relier --><h2>Section plus bas</h2>

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, pour lui permettre d'envoyer un nouveau message, utilisez le schémamailto: :

<a href="mailto:nowhere@mozilla.org">Envoyer un courriel nulle part</a>

Résultat

Pour plus de détails sur les URLmailto:, comme l'inclusion d'un sujet ou d'un corps de message, voirLiens de courrier électronique ouRFC 6068.

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

<a href="tel:+49.157.0156">+49 157 0156</a><a href="tel:+1(555)5309">(555) 5309</a>

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 avecregisterProtocolHandler, commeweb.skype.com.
• Les autres comportements comprennent l'enregistrement du numéro dans les contacts, ou l'envoi du numéro à un autre appareil.

VoirRFC 3966 pour la syntaxe, les fonctionnalités supplémentaires et d'autres détails sur le schéma URLtel:.

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 attributdownload et les données du canvas sous forme d'une URLdata: :

Exemple d'application de peinture avec lien de sauvegarde

HTML

<p>  Peignez en maintenant le bouton de la souris enfoncé et en le déplaçant.  <a href="" download="my_painting.png">Télécharger ma peinture</a></p><canvas width="300" height="300"></canvas>

CSS

html {  font-family: sans-serif;}canvas {  background: white;  border: 1px dashed;}a {  display: inline-block;  background: #6699cc;  color: white;  padding: 5px 10px;}

JavaScript

const canvas = document.querySelector("canvas");const c = canvas.getContext("2d");c.fillStyle = "hotpink";let isDrawing;function draw(x, y) {  if (isDrawing) {    c.beginPath();    c.arc(x, y, 10, 0, Math.PI * 2);    c.closePath();    c.fill();  }}canvas.addEventListener("mousemove", (event) =>  draw(event.offsetX, event.offsetY),);canvas.addEventListener("mousedown", () => (isDrawing = true));canvas.addEventListener("mouseup", () => (isDrawing = false));document  .querySelector("a")  .addEventListener(    "click",    (event) => (event.target.href = canvas.toDataURL()),  );

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 utilisateurs. VoirReferer header : privacy and security concerns pour plus d'informations.

L'utilisation detarget="_blank" sansrel="noreferrer" nirel="noopener" rend le site vulnérable aux attaques exploitant l'APIwindow.opener. Notez toutefois que, dans les versions récentes des navigateurs, définirtarget="_blank" fournit implicitement la même protection querel="noopener". Voir lacompatibilité des navigateurs pour plus de détails.

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément HTML<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'attributhref 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'attributhref 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 attributhref.
• Lesfragments 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.