mozilla

<a>

Résumé

L'élément HTML <a> (pour anchor) définit un hyperlien, une cible de destination nommée pour un hyperlien, ou les deux à la fois.

Attributs

Cet élément inclus les attributs globaux.

download HTML5
Cet attribut, s'il est présent, indique que l'auteur souhaite que le lien soit utilisé pour télécharger la ressource afin que, lorsque l'utilisateur clique dessus, il lui soit proposé d'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 quand l'utilisateur clique sur le lien (bien sûr, l'utilisateur pourra 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.

Note :

  • Les URL blob:, data: et filesystem: peuvent être utilisées pour 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 primera 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.
  • Dans Firefox 20, cet attribut n'est respecté que pour les liens des ressources de même origine.
href
Il s'agissait du seul attribut obligatoire pour définir un hyperlien, mais il n'est plus obligatoire en HTML5. Ne pas mettre cet attribut crée un lien d'espace reservé. 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.

media HTML5
Cet attribut indique le media concerné par le lien. Sa valeur doit être une media query (requête média). Cet attribut est surtout utile lorsqu'on souhaite lier différentes feuilles de styles externe, la feuille la plus adaptée à l'appareil utilisée étant choisie par l'agent utilisateur.

Note d'utilisation :

  • En HTML 4, seule une liste de littéraux (les types et groupes de média), séparés par des blancs était autorisée (par exemple print, screen, aural, braille). Avec HTML 5, il est possible d'utiliser n'importe quelle sorte de media query (qui représentent un sur-ensemble des valeurs autorisées en HTML 4)
  • Les navigateurs qui ne supportent pas les media queries CSS3 peuvent ne pas reconnaître le lien, ne pas oublier de définir des liens à utiliser pour ce cas de figure.
ping HTML5
Cet atttribut, s'il est utilisé, permet d'envoyer une notification à l'URL demandée si l'utilisateur utilise l'hyperlien.
rel
Pour les éléments <a> avec un attribut href, 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ées par des espaces. Les valeurs disponibles et la sémantique seront définies par une autorité tierce. La relation par défaut, si aucune n'a été définie, est nulle. Cet attribut ne doit être utilisé que si l'élément possède un attribut href.
target
Cet attribut indique où afficher la ressource liée. En HTML4, il s'agit du nom, ou du mot-clé, d'une frame. En HTML5, 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 la frame HTML4 actuelle (ou dans le contexte de navigation HTML5). Il s'agit de la valeur par défaut quand l'attribut n'est pas renseigné.
  • _blank : Charge la réponse dans une nouvelle fenêtre HTML4 non nommée ou dans un nouveau contexte de navigation HTML5.
  • _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.
Cet attribut ne doit être utilisé que si l'attribut href est présent.
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.
datafld
Cet attribut définit le nom de la colonne pour l'objet data source qui fournit les données associées.

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, il faut utiliser des scripts et un mécanisme tel que XMLHttpRequest pour modifier la page dynamiquement.

Support Gecko Presto WebKit Trident
Non implémenté Non implémenté Non implémenté IE4, IE5, IE6, IE7 (Retiré dans IE8)
Document normatif Microsoft's Data Binding: dataFld Property (MSDN)
datasrc
Cet attribut définit l'identifiant de l'objet data source qui fournit les données associées à l'élément.

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, il faut utiliser des scripts et un mécanisme tel que XMLHttpRequest pour modifier la page dynamiquement.

Support Gecko Presto WebKit Trident
Non implémenté Non implémenté Non implémenté IE4, IE5, IE6, IE7 (Retiré dans IE8)
Document normatif Microsoft's Data Binding: dataSrc Property (MSDN)
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.
methods
La valeur de cet attribut fournit des informations sur les fonctions qui peuvent être exécutées sur un objet. Les valeurs sont généralement données par le protocol HTTP quand il est utilisé, mais il peut être utile d'inclure des informations additionnelles à l'avance sur le lien. Par exemple, le navigateur pourrait choisir un rendu différent du lien en fonction de la méthode renseignée ; quelque chose de « cherchable » pourrait avoir une icône différente, ou un lien sortant pourra être rendu avec une information indiquant le sortie du site actuel. Cet attribut n'est pas très bien compris, ni supporté, même par le navigateur qui l'a défini, Internet Explorer 4. Propriété Methods (MSDN)
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,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.
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 ; mais, dans le futur, un navigateur pourrait afficher une petite icône correspondant au type de média. Par exemple, un navigateur pourrait ajouter une petite icône d'enceinte quand le type est défini à audio/wav. Pour une liste complète des types MIME reconnus, consultez http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Utilisez cet attribut seulement si l'attribut href est présent.
urn
Cet attribut, supposément supporté par Microsoft, définit une URN (Uniform Resource Name) pour le lien. Bien qu'il soit basé sur des travaux de standardisation datant de plusieurs années, le sens des URN n'est pas encore très bien défini, cet attribut n'est donc pas très utile. Propriété urn (MSDN)

Exemple : Hyperlien vers une ressource externe

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

Résultat

Lien externe

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

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

Exemple : 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 http://jsfiddle.net/codepo8/V6ufG/2/

Spécifications

Spécification Statut Commentaires
WHATWG 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

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) 1.0 (1.7 ou moins) (Oui) (Oui) (Oui)
href="#top" (Oui) 10.0 (10.0) (Oui) (Oui) (Oui)
download 14 20.0 (20.0) Pas de support 15 Pas de support
ping (Oui) Désactivé par défaut Pas de support (Oui) Pas de support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Oui) 1.0 (1.0) (Oui) (Oui) (Oui)
href="#top" (Oui) 10.0 (10.0) (Oui) (Oui) (Oui)
download (Oui) 20.0 (20.0) Pas de support ? Pas de support
ping   Désactivé par défaut      

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

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.

Recommandations JavaScript

Les éléments <a> sont souvent utilisés avec l'évènement onclick. Pour éviter à la page d'être rafraîchie, href est souvent défini soit à "#" ou "javascript:void(0)". Ces deux valeurs peuvent amener des erreurs inattendues lorsque des liens sont copiés, ou ouverts dans une nouvelle fenêtre ou onglet. Il faut faire attention à ces comportements en termes d'utilisabilité, notamment lorsque les utilisateurs utilisent les ancres.

Voir aussi

Étiquettes et contributeurs liés au document

Dernière mise à jour par : SphinxKnight,