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

Cet élément inclut les attributs universels.

download

Sans valeur, le navigateur proposera 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 (de l'en-tête Content-Type, le début d'une URL data:, ou Blob.type pour une URL blob:).

La définition d'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 pour les URLs de même origine, ou les schémas blob: et data:.

• Si l'en-tête Content-Disposition comporte des informations différentes de celles de l'attribut download, le comportement résultant peut différer :

  • Si l'en-tête spécifie un nom de fichier, il a priorité sur un nom de fichier spécifié dans l'attribut download.
  • Si l'en-tête spécifie une disposition de inline, Chrome, et Firefox 82+, donnent la priorité à l'attribut et le traitent comme un téléchargement. Les versions de Firefox antérieures à 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 :

• Sections d'une page avec des fragments d'URL
• Des morceaux de fichiers médias avec des fragments de médias
• Les numéros de téléphone avec l'URL tel:.
• Les adresses électroniques avec l'URL mailto:.
• Bien que les navigateurs web puissent ne pas prendre en charge d'autres schémas d'URL, les sites web le peuvent avec registerProtocolHandler().

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 global 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 suit le lien. Cet attribut est généralement utilisé pour tracer un utilisateur.

referrerpolicy Expérimental

La portion du referrer envoyer lors du suivi du lien. Voir Referrer-Policy pour les valeurs possibles et leurs effets.

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

Note : Définir target="_blank" sur les éléments <a> fournit implicitement le même comportement rel que définir rel="noopener" qui ne définit pas window.opener. Voir la compatibilité des navigateurs pour le support.

type

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

charset Obsolète

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

Note : Cet attribut est déprécié et ne doit pas être utilisé par les auteurs. Utilisez l'en-tête HTTP Content-Type sur l'URL liée.

coords Obsolète

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

name Obsolète

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

Note : Utilisez l'attribut universel id à la place.

rev Obsolète

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

shape Obsolè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.

HTML

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

Résultat

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 {
  display: block;
  margin-bottom: 0.5em;
}

Résultat

<!-- <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 id="section_further_down">Section plus bas</h2>

Résultat

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éma mailto: :

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

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.

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

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

<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: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

JavaScript

var canvas = document.querySelector("canvas"),
  c = canvas.getContext("2d");
c.fillStyle = "hotpink";

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

Les éléments <a> peuvent avoir des conséquences sur la sécurité et la vie privée des utilisateurs. Voir Referer header : privacy and security concerns pour plus d'informations.

L'utilisation de target="_blank" sans rel="noreferrer" et rel="noopener" rend le site web vulnérable aux attaques d'exploitation de l'API window.opener (description de la vulnérabilité), bien qu'il faille noter que, dans les versions plus récentes du navigateur, la définition de target="_blank" fournit implicitement la même protection que la définition de rel="noopener". Voir la compatibilité des navigateurs pour plus de détails.

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

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.

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

<a target="_blank" href="https://www.wikipedia.org">
  Wikipédia
  <img alt="(s'ouvre dans un nouvel onglet)" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  Rapport annuel 2017 (PowerPoint)
  <img alt="(fichier PowerPoint)" src="ppt-icon.svg" />
</a>

• WebAIM : Liens et hypertexte (en anglais)
• 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 (en anglais)
• G201 : Fournir un avertissement aux utilisateurs lorsqu'ils ouvrent une nouvelle fenêtre WCAG 2.0 (en anglais)

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.

<body>
  <a href="#content">Skip to main content</a>

  <header>…</header>

  <main id="content"><!-- Le lien "skip" renvoie vers ici --></main>
</body>

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: "Skip Navigation" Links (en anglais)
• Comment utiliser les skip links - The A11Y Project (en anglais)
• Comprendre les règles WCAG 2.4
• Understanding Success Criterion 2.4.1 - W3C Understanding WCAG 2.0 (en anglais)

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 44x44 pixels CSS.

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 (en anglais)
• Taille des cibles et critère 2.5.5, (en anglais) d'Adrian Roselli (an anglais)
• Test rapide : cibles tactiles suffisamment grande - Projet A11Y (en anglais)

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 (en anglais)

• <link> est similaire à <a>, mais représente des hyperliens de métadonnées qui sont invisibles pour les utilisateurs.
• :link est une pseudo-classe CSS qui correspondra aux éléments <a> avec des attributs href valides.