HTML map Tag - Learn HTML

The HTML <map> tag defines a client-side image map — an image whose different regions link to different destinations. Instead of one link for the whole image, you mark up several clickable "hot spots" on top of it. Each hot spot is described by an <area> element, and all the <area> elements live inside a single <map>.

It is called a client-side image map because the browser handles all the interpreting and rendering of the regions locally — no round trip to the server is needed to figure out which region was clicked.

This page covers how a <map> is wired to its image, how to define the clickable regions with <area>, accessibility requirements, and when an image map is (and is not) the right tool.

How `<map>` connects to an image

A <map> does nothing on its own. It must be referenced by an image through two attributes that have to agree:

On the <map>: the name attribute, e.g. <map name="planets">.
On the <img>: the usemap attribute, which points at that name with a leading #, e.g. <img usemap="#planets">.

<img src="planets.png" alt="The planets" usemap="#planets" />

<map name="planets">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html" />
</map>

Wiring rules to keep in mind:

The # prefix is required on usemap only. The name value is written without the #; the usemap value is written with it (it is a fragment reference). name="planets" ↔ usemap="#planets".
The values are case-sensitive. usemap="#Planets" will not match name="planets".
The name must be unique in the document and must not be empty.
<area> elements must be inside <map>. An <area> placed elsewhere has no effect.

If the names don't match exactly, the image simply renders with no clickable regions and no error is shown — a common silent bug.

Defining clickable regions with `<area>`

Each region is one <area> element. Two attributes describe its geometry, and the rest describe the link:

Attribute	Purpose
`shape`	Region type: `rect`, `circle`, `poly`, or `default`.
`coords`	Coordinates that define the region, in CSS pixels.
`href`	Destination URL of the region.
`alt`	Text alternative for the region (required when `href` is present).
`target`	Where to open the link (`_blank`, `_self`, etc.).

The meaning of coords depends on shape:

Shape	`coords` format	Meaning
`rect`	`x1,y1,x2,y2`	Top-left and bottom-right corners of a rectangle.
`circle`	`x,y,r`	Center point `x,y` and radius `r`.
`poly`	`x1,y1,x2,y2,x3,y3,…`	A list of points forming a polygon (each pair is one vertex).
`default`	(none)	The entire image not covered by another area.

All coordinates are measured from the top-left corner of the image (0,0), in pixels, relative to the image's intrinsic size.

<map name="shapesmap">
  <!-- rectangle from (0,0) to (60,60) -->
  <area shape="rect" coords="0,0,60,60" alt="Square region" href="square.html" />
  <!-- circle centered at (120,30) with radius 25 -->
  <area shape="circle" coords="120,30,25" alt="Round region" href="circle.html" />
  <!-- triangle through three points -->
  <area shape="poly" coords="160,0,200,60,120,60" alt="Triangle region" href="triangle.html" />
</map>

Syntax

The <map> tag comes in pairs. The content is written between the opening (<map>) and closing (</map>) tags.

Example of the HTML `<map>` tag:

HTML <map> tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo items to watch it closer:</p>
    <img src="/uploads/media/default/0001/01/0f94cf189afcdc39c4df2a73d230d1a7425ee66d.png"  width="145" height="126" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="45,58,30" alt="html-book" href="https://www.w3docs.com/learn-html.html" />
      <area shape="circle" coords="88,64,15" alt="html-quiz" href="https://www.w3docs.com/quiz-start/html-basic" />
      <area shape="circle" coords="114,67,14" alt="html-snippets" href="https://www.w3docs.com/snippets/html.html" />
    </map>
  </body>
</html>

Try it Yourself »

Attributes

Attributes	Value	Description
name	mapname	Sets the name of an image-map.

The <map> element also uses the Global Attributes.

Accessibility

Image maps are entirely visual unless you make them otherwise, so a few rules matter:

Every linked <area> needs a meaningful alt. Screen readers announce each area by its alt text, exactly as they do for links. An empty or missing alt on a clickable area leaves the link unlabeled.
Make the alt describe the destination, not the picture. "Open the contact page" is more useful than "blue circle".
Keyboard navigation works automatically for areas that have an href: each becomes a focusable, tabbable link. Avoid placing interactivity only in a region with no href, as it won't be reachable by keyboard.
Don't rely on tiny hot spots. Small or oddly shaped regions are hard to hit with a mouse, touch, or assistive pointer.

When to use (and when not to)

Client-side image maps are an old feature and they still work, but they fit only a narrow set of cases today.

Reasonable use: a single raster image (a photo, a diagram, a scanned floor plan) where a handful of rectangular or circular regions need to link somewhere, and the image won't be resized responsively.

Avoid <map> when:

The layout is responsive. coords are fixed pixel values tied to the image's intrinsic size; they don't scale when the image is resized with CSS, so the hot spots drift out of place.
The regions are buttons, menus, or anything complex. Build those with real HTML/CSS instead.

For most modern needs there are better alternatives:

Overlay anchors with CSS — place absolutely-positioned <a> elements (in percentages) on top of a responsive image. This scales correctly and is fully accessible.
Inline <svg> — draw shapes as real, scalable, styleable elements and wrap each clickable shape in an <a>. This is the most flexible option for diagrams and intricate regions.

See also HTML Links for how anchors and link targets behave.

Practice

What is true about the HTML <map> tag as described on the linked web page?

The HTML <map> tag is used for creating an image map.<map> tag is not supported in HTML5.<map> tag defines a client-side image-map. An image-map is an image with clickable areas.<map> tag cannot be used with <area> elements to define the clickable areas in the image map.<map> element does not contains one or more <area> elements that define the clickable areas in the image map.

How <map> connects to an image

Defining clickable regions with <area>