Balise HTML <area>

La balise <area> identifie les zones actives (coordonnées, forme, taille, etc.) d'une carte image définie par la balise <map>. Lorsque vous cliquez sur une zone active de l'image, une action particulière se produit — par exemple, la navigation vers une page contenant des informations détaillées.

Cette page explique le rôle de <area>, le fonctionnement du système de coordonnées coords, toutes les valeurs de forme (y compris poly et default), les règles d'accessibilité à respecter, ainsi que le problème de mise en page responsive qui piège souvent les développeurs dans des projets réels.

La balise <area> est toujours placée à l'intérieur de la balise <map>. Les zones actives peuvent se chevaucher ; dans ce cas, c'est la zone qui apparaît en dernier dans l'ordre du DOM qui est activée lors d'un clic.

Pourquoi et quand utiliser une carte image

Une carte image transforme des parties d'une seule <img> en liens cliquables distincts. Chaque <area> devient son propre hotspot avec son propre href, si bien qu'une seule image peut mener vers plusieurs destinations — imaginez un diagramme cliquable, un plan d'étage ou une carte de régions.

Vous associez une image à sa carte grâce à l'attribut usemap sur la balise <img>, qui pointe vers le name de la carte (par exemple, usemap="#blockmap" correspond à <map name="blockmap">).

Quand une carte image est un bon choix :

Les régions cliquables se trouvent réellement à l'intérieur d'une seule image raster (une photo, un diagramme scanné) et ne peuvent pas être facilement divisées en éléments séparés.
Les formes sont irrégulières (le contour d'un pays, un hotspot non rectangulaire) pour lesquelles une zone poly est la solution naturelle.

Quand préférer une alternative :

Hotspots rectangulaires sur du contenu séparé → utilisez simplement des liens <a> individuels (chacun englobant sa propre image ou son bloc stylisé). C'est plus flexible et responsive par défaut.
Graphiques vectoriels / diagrammes redimensionnables → utilisez du SVG intégré avec des éléments <a> à l'intérieur. Les hotspots SVG s'adaptent à la mise en page, supportent les styles de survol/focus et sont bien plus accessibles que les formes <area> en pixels.
Boutons superposés simples → des liens CSS positionnés en absolu sur l'image s'adaptent mieux que des coords fixes.

Le principal compromis : les coordonnées <area> sont mesurées en pixels fixes, ce qui signifie qu'une carte image ne s'adapte pas lorsque l'image est redimensionnée par des styles CSS responsives (voir la section sur la limitation responsive et mobile ci-dessous).

Syntaxe

La balise <area> est vide, ce qui signifie que la balise de fermeture n'est pas requise. Mais en XHTML, la balise <area> doit être fermée (<area />).

Exemple de la balise HTML `<area>` :

Balise HTML <area>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo item to watch it closer:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>

Essayez vous-même »

Fonctionnement du système de coordonnées coords

C'est la partie que les développeurs comprennent le plus souvent mal. Toutes les valeurs coords sont des décalages en pixels mesurés depuis le coin supérieur gauche de l'image — pas la page, et pas le viewport. Le premier axe (x) augmente vers la droite ; le second axe (y) augmente vers le bas.

La signification des chiffres dépend de shape :

rect — x1,y1,x2,y2 : le coin supérieur gauche, puis le coin inférieur droit.
circle — x,y,radius : le point central, puis le rayon (tous en pixels).
poly — x1,y1,x2,y2,...,xn,yn : une liste ordonnée de sommets ; le navigateur les relie et ferme la forme automatiquement.
default — aucune coordonnée ; la zone couvre toute l'image.

Exemple concret

Pour une image de 250 pixels de large et 150 pixels de haut, un rectangle couvrant son quart supérieur gauche est :

<area shape="rect" coords="0,0,125,75" alt="Top-left quarter" href="/top-left">

Lisez-le ainsi : coin supérieur gauche à (0, 0), coin inférieur droit à (125, 75). Un cercle centré au milieu de cette même image avec un rayon de 40 px est coords="125,75,40".

Ces valeurs étant des pixels bruts, elles doivent correspondre à la taille intrinsèque (naturelle) de l'image, et non à la taille d'affichage redimensionnée par CSS.

Exemple de forme polygonale (poly)

Utilisez shape="poly" pour tout hotspot non rectangulaire et non circulaire — un triangle, une flèche, le contour d'un pays. Listez les sommets dans l'ordre ; le navigateur trace des lignes droites entre les points consécutifs et ferme le chemin en revenant au premier point.

<!DOCTYPE html>
<html>
  <head>
    <title>Polygon image map</title>
  </head>
  <body>
    <p>Click inside the triangle:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"
         width="250" height="150" alt="Diagram" usemap="#shapemap" />
    <map name="shapemap">
      <!-- A triangle: top-center, bottom-left, bottom-right -->
      <area shape="poly" coords="125,20,30,130,220,130"
            alt="Triangle hotspot linking to the docs" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>

Les trois points (125,20), (30,130) et (220,130) forment les coins du triangle ; vous n'avez pas à répéter le premier point à la fin — la forme se ferme d'elle-même.

Attributs

Attribut	Valeur	Description
alt	texte	Spécifie un texte alternatif pour la zone active.
coords	x1,y1,x2,y2 \| x,y,radius \| x1,y1,...,xn,yn	Spécifie les coordonnées de la zone active en pixels depuis le coin supérieur gauche de l'image. Les valeurs dépendent de la forme : `rect` (coins supérieur gauche et inférieur droit), `circle` (centre et rayon), `poly` (sommets du polygone) ; à omettre pour `default`.
download	filename	Indique que lorsqu'on clique sur une zone spécifique, le fichier doit être téléchargé.
href	URL	Spécifie la référence pour la transition. Omettez `href` pour rendre la zone inactive (sans lien).
hreflang	language_code	Définit la langue du document référencé. Utilisé uniquement avec `href`.
nohref	(aucun)	Déprécié. Marquait autrefois une zone comme n'ayant pas de lien. Supprimé en HTML5 — omettez simplement l'attribut `href` à la place.
rel	alternate \| author \| bookmark \| help \| license \| next \| nofollow \| noreferrer \| prefetch \| prev \| search \| tag	Établit un lien entre le document courant et le document lié.
shape	rect \| circle \| poly \| default	Définit la forme de la zone. `default` fait couvrir à la zone toute l'image.
target	_blank \| _self \| _top \| _parent \| frame_name	Spécifie comment le document lié doit être ouvert. `frame_name` n'est pas pris en charge en HTML5.
type	media_type	Spécifie le type MIME du document lié.

La balise <area> prend également en charge les attributs globaux et les attributs d'événements.

La valeur shape="default"

shape="default" définit une zone sans coordonnées qui couvre toute l'image — tout ce qui n'est pas pris en charge par une zone rect, circle ou poly plus spécifique. Elle est pratique comme lien de repli ou cible fourre-tout « cliquer n'importe où ailleurs ».

<map name="catchall">
  <area shape="circle" coords="125,75,40" alt="Center hotspot" href="/center">
  <area shape="default" alt="Everywhere else" href="/elsewhere">
</map>

Étant donné que les zones plus spécifiques correspondant en premier ont la priorité, placez default en dernier afin qu'elle ne capte que les clics qu'aucune autre zone ne gère.

Accessibilité

L'accessibilité est la préoccupation pratique la plus importante avec les cartes images, car l'image elle-même ne porte aucun texte. Chaque hotspot est invisible pour un lecteur d'écran à moins de lui attribuer un label.

alt est obligatoire sur chaque <area>. La spécification l'impose dès lors que la zone possède un href. Rendez-le significatif : il doit décrire où mène le lien (la destination ou l'action du lien), et non l'image. Par exemple alt="Voir la référence CSS", pas alt="cercle".
Navigation au clavier : les navigateurs exposent chaque <area> comme un lien pouvant recevoir le focus, permettant aux utilisateurs d'accéder à chaque hotspot via la touche Tab et de l'activer avec Entrée. Cela ne fonctionne que si chaque zone possède à la fois un href et un alt clair — une zone sans alt est annoncée comme un lien sans label, ce qui constitue un obstacle sérieux.
L'image elle-même a encore besoin de son propre alt. Définissez alt sur la balise <img> pour décrire l'image dans son ensemble, séparément des labels de lien par zone.
Pour les graphiques complexes comportant de nombreuses régions, envisagez si une liste de liens <a> simples ou un SVG intégré avec des liens focusables servirait mieux les utilisateurs de technologies d'assistance que des hotspots en pixels.

Limitation responsive et mobile

Les coordonnées <area> sont des valeurs en pixels fixes liées à la taille intrinsèque de l'image. Elles ne s'adaptent pas. Dès que vous rendez l'image fluide — par exemple avec width: 100% ou max-width: 100% en CSS — l'image visible est redimensionnée mais les hotspots restent ancrés à la grille de pixels originale. Les régions cliquables se décalent alors par rapport à ce que l'utilisateur voit, et sur les petits écrans mobiles, elles peuvent devenir minuscules et difficiles à atteindre.

Le HTML standard ne propose aucun correctif intégré pour cela. En pratique, vous pouvez soit :

Éviter les cartes images pour les mises en page responsives et utiliser des alternatives redimensionnables — des liens <a> positionnés en CSS par superposition, ou un SVG intégré dont les hotspots <a> s'adaptent à la mise en page.
Ou recalculer les coordonnées avec JavaScript à chaque redimensionnement de l'image (une dépendance supplémentaire à maintenir).

Si votre design doit s'adapter à différentes tailles d'écran, préférez le SVG ou les liens positionnés à <area> dès le départ.

Entraînement

Pratique

Quel est le rôle de la balise HTML area et quels sont ses attributs ?

La balise HTML area sert à définir des zones dans une carte image et ses attributs incluent alt, coords, href, shape et target.La balise HTML area sert à créer des sections ou des divisions dans un document HTML et ses attributs incluent id, class et style.La balise HTML area sert à mettre en forme du texte dans un document HTML et ses attributs incluent size, color et font.La balise HTML area sert à créer des hyperliens dans un document HTML et ses attributs incluent href, rel et target.

Pratique

Pour un hotspot circulaire, que représentent les trois chiffres de coords et depuis où l'origine est-elle mesurée ?

Le centre x, le centre y et le rayon, mesurés en pixels depuis le coin supérieur gauche de l'image.La gauche, le haut et la largeur, mesurés en pixels depuis le coin supérieur gauche de la page.Le rayon, le centre x et le centre y, exprimés en pourcentages du viewport.Deux points d'angle et un rayon, mesurés depuis le centre de l'image.

Pratique

Quelle valeur de shape fait couvrir à une zone toute l'image, et comment rendre une zone inactive en HTML moderne ?

Utilisez shape avec la valeur default, et omettez l'attribut href pour rendre la zone inactive.Utilisez shape avec la valeur full, et ajoutez l'attribut nohref pour rendre la zone inactive.Utilisez shape avec la valeur rect, et définissez href comme une chaîne vide pour rendre la zone inactive.Utilisez shape avec la valeur poly, et ajoutez l'attribut disabled pour rendre la zone inactive.

Pourquoi et quand utiliser une carte image

Syntaxe

Exemple de la balise HTML <area> :

Fonctionnement du système de coordonnées coords

Exemple concret

Exemple de forme polygonale (poly)

Attributs

La valeur shape="default"

Accessibilité

Limitation responsive et mobile

Entraînement

Exemple de la balise HTML `<area>` :