L'élément HTML <area> définit une zone particulière d'une image et peut lui associer un lien hypertexte. Cet élément n'est utilisé qu'au sein d'un élément <map>.

Attributs

Cet élément inclut les attributs universels.

alt
Un texte alternatif que les navigateurs doivent afficher afin de remplacer l'image si elle ne peut pas être affichée. Le texte doit être phrasé de façon à offrir les mêmes choix qui auraient été offerts par l'image. En HTML4, cet attribut est obligatoire mais peut prendre la valeur "" (la chaîne de caractères vide). En HTML5, cet attribut est requis uniquement si l'attribut href est utilisé.
coords
A set of values specifying the coordinates of the hot-spot region. The number and meaning of the values depend upon the value specified for the shape attribute.
  • rect or rectangle: the coords value is two x,y pairs: left, top, right, bottom.
  • circle: the value is x,y,r where x,y is a pair specifying the center of the circle and r is a value for the radius.
  • poly or polygon: the value is a set of x,y pairs for each point in the polygon: x1,y1,x2,y2,x3,y3, and so on.
In HTML4, the values are numbers of pixels or percentages, if a percent sign (%) is appended; in HTML5, the values are numbers of CSS pixels.
href
Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. En HTML4, l'un des deux attributs href ou nohref doit être présent. En HTML5, cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.
hreflang HTML5
Indique la langue de la ressource liée. Les valeurs que peut prendre cet attribut sont définis dans le BCP47. Cet attribut ne doit être utilisé que si l'attribut href est présent.
ping HTML5
Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP POST dont le corps vaut PING lors du clic sur le lien. Les requêtes sont envoyées en arrière-plan. Cet attribut est généralement utilisé à des fins de pistage.
referrerpolicy
Une chaîne de caractères qui indique le référent (referrer) à 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 HTML5
Pour les ancres contenant l'attribut href, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des différentes relations dont les valeurs sont séparées par des espaces. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut ne doit être utilisé seulement si l'attribut href est présent.
shape
La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs rect (zone rectangulaire), circle (zone circulaire), poly (zone polygonale) et default (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs circ, polygon et rectangle pour l'attribut shape. Ces valeurs sont .
target
Cet attribut précise où afficher la ressource liée. En HTML4 c'est le nom (ou un mot-clé) d'un cadre. En HTML5, c'est le nom (ou le mot-clé) d'un contexte de navigation (un onglet, une fenêtre, ou une frame inline). Les mots-clés peuvent avoir les significations suivantes :
  • _self : Charge la réponse dans le même cadre HTML4 ou dans le même contexte de navigation HTML5. Cette valeur est la valeur par défaut si l'attribut n'est pas précisé.
  • _blank : Charge la réponse dans une nouvelle fenêtre (sans nom) avec HTML4 ou dans un nouveau contenu de navigation HTML5 (sans nom).
  • _parent : Charge la réponse dans le même cadre que le parent  du cadre de l'élément actuel en HTML4. En HTML5 on a la même situation avec le contexte de navigation. S'il n'y pas de parent, cette valeur aura le même rôle que la valeur _self.
  • _top : En HTML4 la réponse sera chargée dans toute la fenêtre d'origine annulant ainsi les autres cadres. En HTML5 la réponse sera chargée dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur _self.

Cet attribut doit uniqument être utilisé si l'attribut href est présent.

Attributs dépréciés ou obsolètes

accesskey HTML 4 seulement, Obsolète depuis Gecko 5.0
Définit un raccourci clavier pour cet élément. Appuyer sur la touche ALT (ou une autre touche similaire) et sur la touche définie par l'attribut sélectionnera l'action associée à cette séquence. Il est conseillé de ne pas utiliser les combinaisons de touches déjà utilisées par les navigateurs. Cet attribut est global depuis HTML5.
name HTML 4 seulement, Obsolète depuis Gecko 5.0
Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.
nohref HTML 4 seulement, Obsolète depuis Gecko 5.0
Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si href ne l'est pas et vice versa.

Note d'utilisation : Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut href suffit.

tabindex HTML 4 seulement, Obsolète depuis Gecko 5.0
Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.
typeObsolète depuis Gecko 5.1
Cet attribut définit le type MIME de la cible du lien. Cet attribut a généralement une fonction indicative. Cependant les prochains navigateurs pourraient ajouter une petite icône pour les types multimédia. Voir http://www.w3.org/TR/html4/references.html#ref-MIMETYPES pour une liste complète des types MIME reconnus. Cet attribut ne doit être utilisé que si l'attribut href est présent.

Exemples

Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.

HTML

<map name="exemple-map-1">
  <area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" alt="Page d'accueil MDN" />
  <area shape="default" />
</map>
<img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png">

Résultat

Résumé technique

Catégories de contenu Contenu de flux, contenu phrasé
Contenu autorisé Aucun, cet élément est un élément vide.
Omission de balises Cet élément doit avoir une balise de fin et ne pas avoir de balise de début.
Parents autorisés Tout élément acceptant du contenu phrasé. L'élément <area> doit avoir un élément <map> parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent direct.
Rôles ARIA autorisés Aucun.
Interface DOM HTMLAreaElement

Spécifications

Spécification État Commentaires
Referrer Policy
La définition de 'referrerpolicy attribute' dans cette spécification.
Candidat au statut de recommandation Ajout de l'attribut referrerpolicy.
HTML Living Standard
La définition de '<area>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<area>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<area>' dans cette spécification.
Recommendation  

Notes

  • Dans les spécifications HTML des versions 3.2, 4.0, et 5, la balise de fermeture </area> est proscrite.
  • La spécification XHTML 1.0 demande l'utilisation d'une barre oblique avant le chevron fermant : <area />.
  • Les attributs id, class et style ont la même signification que ceux qui avaient été définis dans la spécification HTML 4. Cependant cette spécification n'avait été définie que par Microsoft et Netscape.
  • Les navigateurs Netscape de niveau 1 n'arrivent pas à interpréter l'attribut target si celui-ci fait référence à des éléments frames.
  • HTML 3.2 définit seulement les attributs alt, coords, href, nohref et shape.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
accesskey
Obsolète
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
altChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
coordsChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
downloadChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
hrefChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
hreflangChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
name
Obsolète
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
mediaChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
nohref
Obsolète
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
referrerpolicyChrome Support complet 51Edge Aucun support NonFirefox Support complet 50IE Aucun support NonOpera Support complet 38Safari Support complet 11.1WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Aucun support NonFirefox Android Support complet 50Opera Android Support complet 38Safari iOS Aucun support NonSamsung Internet Android Support complet 7.2
relChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
shapeChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
tabindex
Obsolète
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
targetChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
type
Obsolète
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, sp00m, tregagnon
Dernière mise à jour par : SphinxKnight,