References

Beginner-friendly references for web development, with live, editable examples.

The HTML <area> tag

Element All modern browsers Updated
Quick answer

The HTML <area> element defines a clickable, hyperlinked region inside a <map> image map. Its shape and coords describe the region, href sets the destination, and alt gives it an accessible name.

Overview

The <area> element is a void element that lives inside a <map> and defines a single hyperlinked hotspot over an image. Its shape (rect, circle, poly or default) and coords describe the region's geometry.

Beyond the shape, it behaves much like an <a>: it supports href, target, download, rel and referrerpolicy, so a hotspot can link, open in a new tab, or trigger a download just as a normal link would.

Each linked <area> must carry alt text describing its destination, because the visual region on the image is not announced to assistive technology — the alt is the only label a screen-reader user gets for the hotspot.

Syntax

<area shape="circle" coords="75,75,50" href="/sun" alt="The Sun">

Attributes

The <area> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
alt A short, descriptive string. Use an empty value (alt="") for purely decorative images. Provides alternative text for an image.
coords Comma-separated numbers — x,y,radius for circle; x1,y1,x2,y2 for rect; a list of x,y pairs for poly. Sets the coordinates of an image-map area.
download Empty (use the resource's name) — or a string giving a suggested filename. Prompts the browser to download the linked file.
href A URL — absolute, relative, or a special scheme such as mailto:, tel: or a #fragment. Specifies the URL a hyperlink points to.
ping A space-separated list of URLs. Pings URLs when the link is clicked.
referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin (default) unsafe-url Controls the Referer header sent for the request.
rel A space-separated list of link types, e.g. nofollow, noopener, noreferrer, stylesheet, preload, canonical, icon, sponsored, ugc. Defines the relationship to the linked resource.
shape rect circle poly default Sets the shape of an image-map area.
target _self (default) _blank _parent _top a named browsing context Specifies where to open a link or form result.

Example

Live example 
<img src="https://codeshack.io/web/img/icon.png" usemap="#demo2" alt="" width="64" height="64">
<map name="demo2">
  <area shape="rect" coords="0,0,64,64" href="https://codeshack.io/" alt="Home">
</map>

Best practices

  • Give every linked <area> meaningful alt text describing where it leads.
  • Choose the right shape — rect, circle or poly — and matching coords.
  • Use the link attributes (href, target, rel) just as you would on an <a>.
  • Keep it inside a <map> connected to an image via usemap.

Accessibility

Image-map areas are keyboard-focusable links, but their hotspots are invisible — descriptive alt text is essential so screen-reader and keyboard users understand each link's destination.

Frequently asked questions

What is the area element?
A void element inside a <map> that defines one clickable, hyperlinked region of an image map.
How do I define a clickable region in an image map?
Add an <area> with a shape, coords, an href and descriptive alt text inside the <map>.
Does the area element need alt text?
Yes. Each linked area must have alt text, since the region itself is not announced to assistive technology.
What shapes can an area be?
rect (rectangle), circle, poly (polygon) or default (the whole image), each with matching coords.
address article