HTML <area> tag

The <area> tag identifies the active areas (coordinates, shape, size, etc.) of the image map, defined by the <map> tag. When you click on the active area of the image, a certain action takes place, for example, switching to a page with detailed information.

This page explains what <area> does, how the coords coordinate system works, every shape value (including poly and default), the accessibility rules you must follow, and the responsive-layout gotcha that bites people in real projects.

The <area> tag is always placed inside the <map> tag. Active areas can overlap, in which case the area that appears later in the DOM order is activated when clicked.

Why and when to use an image map

An image map turns parts of a single <img> into separate clickable links. Each <area> becomes its own hotspot with its own href, so one image can lead to several destinations — think a clickable diagram, a floor plan, or a map of regions.

You connect an image to its map with the usemap attribute on the <img>, which points to the map's name (e.g. usemap="#blockmap" matches <map name="blockmap">).

When an image map is a good fit:

The clickable regions are genuinely inside one raster image (a photo, a scanned diagram) and can't easily be split into separate elements.
The shapes are irregular (a country outline, a non-rectangular hotspot) where a poly area is the natural fit.

When to reach for an alternative instead:

Rectangular hotspots over separate content → just lay out individual <a> links (each wrapping its own image or styled block). This is more flexible and responsive by default.
Vector graphics / scalable diagrams → use inline SVG with <a> elements inside it. SVG hotspots scale with the layout, support hover/focus styling, and are far more accessible than pixel-based <area> shapes.
Simple overlay buttons → absolutely-positioned CSS links over the image scale better than fixed coords.

The big trade-off: <area> coordinates are measured in fixed pixels, so an image map does not adapt when the image is scaled by responsive CSS (see the Responsive and mobile limitation section below).

Syntax

The <area> tag is empty, which means that the closing tag isn’t required. But in XHTML, the <area> tag must be closed (<area />).

Example of the HTML `<area>` tag:

HTML tag <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>

Try it Yourself »

How the coords coordinate system works

This is the part developers most often get wrong. All coords values are pixel offsets measured from the top-left corner of the image — not the page, and not the viewport. The first axis (x) increases to the right; the second axis (y) increases downward.

The meaning of the numbers depends on shape:

rect — x1,y1,x2,y2: the top-left corner, then the bottom-right corner.
circle — x,y,radius: the center point, then the radius (all in pixels).
poly — x1,y1,x2,y2,...,xn,yn: an ordered list of vertices; the browser connects them and closes the shape automatically.
default — no coords; the area covers the whole image.

Worked example

For an image that is 250 wide and 150 tall, a rectangle covering its top-left quarter is:

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

Read it as: top-left corner at (0, 0), bottom-right corner at (125, 75). A circle centered in the middle of that same image with a 40 px radius is coords="125,75,40".

Because these are raw pixels, they must match the image's intrinsic (natural) size, not a CSS-scaled display size.

Polygon (poly) shape example

Use shape="poly" for any non-rectangular, non-circular hotspot — a triangle, an arrow, a country outline. List the vertices in order; the browser draws straight lines between consecutive points and closes the path back to the first 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>

The three points (125,20), (30,130), (220,130) form the triangle's corners; you do not repeat the first point at the end — the shape closes itself.

Attributes

Attribute	Value	Description
alt	text	Specifies an alternate text for the active area.
coords	x1,y1,x2,y2 \| x,y,radius \| x1,y1,...,xn,yn	Specifies the coordinates of the active area in pixels from the image's top-left corner. Values depend on the shape: `rect` (upper-left and lower-right corners), `circle` (center and radius), `poly` (polygon vertices); omit for `default`.
download	filename	Indicates that when you click on a specific area, the file must be downloaded.
href	URL	Specifies the reference for the transition. Omit `href` to make the area inactive (no link).
hreflang	language_code	Defines the language of the referenced document. Used only with `href`.
nohref	(none)	Deprecated. Once marked an area as having no link. Removed in HTML5 — instead, simply omit the `href` attribute.
rel	alternate \| author \| bookmark \| help \| license \| next \| nofollow \| noreferrer \| prefetch \| prev \| search \| tag	Establishes a link between the current and linked documents.
shape	rect \| circle \| poly \| default	Defines the shape of the area. `default` makes the area cover the entire image.
target	_blank \| _self \| _top \| _parent \| frame_name	Specifies how the linked document should be opened. `frame_name` is not supported in HTML5.
type	media_type	Specifies the MIME-type of the linked document.

The <area> tag supports also the Global attributes and the Event Attributes.

The shape="default" value

shape="default" defines an area with no coordinates that covers the entire image — anything not claimed by a more specific rect, circle, or poly area. It is handy as a fallback link or a catch-all "click anywhere else" target.

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

Because earlier-matching, more specific areas take precedence, put default last so it only catches clicks no other area handles.

Accessibility

Accessibility is the single most important practical concern with image maps, because the image itself carries no text. Each hotspot is invisible to a screen reader unless you label it.

alt is required on every <area>. The spec mandates it whenever the area has an href. Make it meaningful: it should describe where the link goes (the link's destination or action), not the picture. For example alt="View CSS reference", not alt="circle".
Keyboard navigation: browsers expose each <area> as a focusable link, so users can Tab to every hotspot and activate it with Enter. This only works if each area has both an href and a clear alt — an area with no alt is announced as an unlabeled link, which is a serious barrier.
The image still needs its own alt. Set alt on the <img> to describe the picture as a whole, separately from the per-area link labels.
For complex graphics with many regions, consider whether a list of plain <a> links or an inline SVG with focusable links would serve assistive-technology users better than pixel hotspots.

Responsive and mobile limitation

<area> coordinates are fixed pixel values tied to the image's intrinsic size. They do not scale. The moment you make the image fluid — for example with width: 100% or max-width: 100% in CSS — the visible image resizes but the hotspots stay anchored to the original pixel grid. The clickable regions then drift away from what the user sees, and on small mobile screens they can become tiny and easy to miss.

Plain HTML offers no built-in fix for this. In practice you either:

Avoid image maps for responsive layouts and use scalable alternatives — overlaid CSS-positioned <a> links, or an inline SVG whose <a> hotspots scale with the layout.
Or recalculate the coordinates with JavaScript whenever the image is resized (an extra dependency to maintain).

If your design must adapt across screen sizes, prefer SVG or positioned links over <area> from the start.

Practice

What is the purpose of the HTML area tag and what are its attributes?

The HTML area tag is used to define areas in an image-map and its attributes include alt, coords, href, shape, and target.The HTML area tag is used to create sections or divisions in an HTML document and its attributes include id, class, and style.The HTML area tag is used for formatting text in an HTML document and its attributes include size, color, and font.The HTML area tag is used to create hyperlinks in an HTML document and its attributes include href, rel, and target.

Practice

For a circular hotspot, what do the three numbers in coords represent and where is the origin measured from?

Center x, center y, and radius, measured in pixels from the top-left corner of the image.Left, top, and width, measured in pixels from the top-left corner of the page.Radius, center x, and center y, measured as percentages of the viewport.Two corner points and a radius, measured from the center of the image.

Practice

Which shape value makes an area cover the entire image, and how do you mark an area as having no link in modern HTML?

Use shape with the value default, and omit the href attribute to make the area inactive.Use shape with the value full, and add the nohref attribute to make the area inactive.Use shape with the value rect, and set href to an empty string to make the area inactive.Use shape with the value poly, and add the disabled attribute to make the area inactive.

Why and when to use an image map

Syntax

Example of the HTML <area> tag:

How the coords coordinate system works

Worked example

Polygon (poly) shape example

Attributes

The shape="default" value

Accessibility

Responsive and mobile limitation

Practice

Example of the HTML `<area>` tag: