<area> Image map area
One clickable region of an image map.
<area> is a void element marking a clickable region of an image map. It goes inside a <map>, and the image connects to that map through usemap.
The region is set with shape and coords, measured in image pixels. An area with an href behaves like a link, so it needs alt text. Image maps also ignore responsive resizing, and plain links are often the better choice.
The rect, circle and poly shapes are listed in the area element definition (opens in a new tab). Its parent is always a map element.
Void element: it has no content and no closing tag.
Syntax
<map name="plan">
<area shape="rect" coords="0,0,100,50" href="room.html" alt="Room">
</map>When to use it
An <area> earns its place when the image is the interface. A floor plan where each room links to its booking page, a bicycle diagram with clickable parts and a seating chart are good examples. rect draws boxes, circle round regions and poly irregular outlines given as x,y pairs. default takes everything no other area covers.
Most of the time a normal a around the whole image, or a few separately linked images, is easier to build and to maintain. The modern alternative is inline SVG with a link around each shape, and you can style those shapes on hover.
Overlapping areas go to whichever comes first in the source. List the small regions, like a door inside a room, before the big ones, or the big area swallows every click. An area without href does nothing and can't take focus. The old nohref attribute is obsolete; leave href out instead.
Attributes
| Attribute | What it does |
|---|---|
shape | rect, circle, poly or default. |
coords | Coordinates in pixels: x1,y1,x2,y2 for rect; x,y,r for circle. |
href | Destination of the link. |
alt | Text for the link (required when href is set). |
target | Where to open the link. |
download | Download instead of navigating. |
rel | Relationship to the destination. |
Live example
Edit the code and watch the preview.
<img src="cat.svg" alt="A cat" width="400" height="300" usemap="#catmap">
<map name="catmap">
<area shape="rect" coords="0,0,200,300" href="#left" alt="Left half of the picture">
<area shape="rect" coords="200,0,400,300" href="#right" alt="Right half of the picture">
</map>More examples
Polygon and default shapes
A triangle drawn with shape="poly" covers the top of the picture, and shape="default" picks up clicks everywhere else. The poly coords are three x,y corners in pixels, counted from the image's top left corner.
<img src="mountains.svg" alt="Mountain range" width="800" height="400" usemap="#peaks">
<map name="peaks">
<area shape="poly" coords="250,60,100,300,400,300" href="#peak" alt="The highest peak">
<area shape="default" href="#valley" alt="The rest of the valley">
</map>Overlapping areas
The small circle around the face comes first in the source, so it beats the rectangle covering the whole picture. Swap the two and the face stops being clickable on its own.
<img src="avatar.svg" alt="Profile picture" width="200" height="200" usemap="#profile">
<map name="profile">
<area shape="circle" coords="100,80,45" href="#photo" alt="Change profile photo">
<area shape="rect" coords="0,0,200,200" href="#profile" alt="View full profile">
</map>Tip: A linked area must have alt text.
Browser support
area is standard HTML. All browsers support it along with the rect, circle, poly and default shapes. Each linked area is reachable with the Tab key, and its alt text serves as the link name. download, rel, referrerpolicy and similar attributes behave the same as on the a element.
Accessibility
Screen readers present each area with an href as a link, so give it alt text that names the destination. Text alternatives for image map areas are covered in the W3C note Understanding Non-text Content (opens in a new tab).
Common mistakes
Wrong
<area shape="rect" coords="0,0,100,100" href="/north">Right
<area shape="rect" coords="0,0,100,100" href="/north" alt="North region">The alt text of a linked area is its link text, so it cannot be left out.
Frequently asked questions
How do I make part of an image clickable?
Use an image map. Give the <img> a usemap="#name" attribute and add a <map name="name"> holding <area> elements. Each area gets a shape (rect, circle or poly), coords in image pixels, an href and an alt. The coordinates stay fixed when the image resizes, so maps suit fixed-size images best.
Are image maps still used?
Rarely, though every browser still supports them. Their coordinates do not adapt to responsive images, which rules them out for most layouts. These days people reach for inline SVG with <a> elements around the shapes, or ordinary links placed over the image with CSS. For a simple diagram at a fixed size, an image map is still fine. Wikipedia's image maps (opens in a new tab) article covers the history.