Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.
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.
- Catégories de contenuContenu de flux, contenu phrasé, contenu interactif, contenu tangible.
- Contenu autorisé Transparent, contenant soit des contenus de flux ou des contenus phrasé,
- Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
- Élément parents autorisés Tout élément acceptant du contenu phrasé, ou tout élément acceptant du contenu de flux.
- Interface DOM
HTMLAnchorElement
.
Attributs
Cet élément inclut les attributs universels.
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, 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:
etfilesystem:
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:
vautinline
, 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.
- Les URL
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
etmailto
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.
- 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
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 attributhref
, 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. 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 attributhref
. 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
.
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 globalid
, et doit être un identifiant alphanumérique unique au document. Sous la spécification HTML 4.01,id
etname
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
, etrect
. Le format de l'attributcoords
dépend de la valeur deshape
. Pourcircle
, la valeur estx,y,r
oùx
ety
sont les coordonnées en pixel pour le centre du cercle etr
est le rayon du cercle en pixel. Pourrect
, l'attributcoords
doit êtrex,y,w,h
. Les valeursx,y
définissent le coin supérieur gauche du rectangle, pendantw
eth
définissent respectivement la largeur et la hauteur. Une valeurpolygon
pour shape nécessite les valeursx1,y1,x2,y2,...
pourcoords
. Chaque paire dex,y
définissent un point du polygone, avec les points successifs joints par des lignes droites, et le dernier point joint au premier. La valeurdefault
pourshape
nécessite que la totalité de la zone, habituellement une image, soit utilisée. 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 https://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Utilisez cet attribut seulement si l'attributhref
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="https://www.mozilla.com/"> Lien externe </a>
Résultat
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:[email protected]">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 https://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.
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 |
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
, ettitle
. - 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
ettransitional
.