References

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

The HTML <map> tag

Element All modern browsers Updated
Quick answer

The HTML <map> element defines a client-side image map — a set of clickable <area> regions on an image. Its name links it to an <img> via that image's usemap attribute.

Overview

The <map> element groups a set of <area> elements that define clickable hotspots over an image — an image map. You connect a map to its image by giving the map a name and pointing the image's usemap attribute at #name.

Image maps are valid but niche. They do not scale responsively (the coordinates are fixed pixel values), so for most layouts overlaid links positioned with CSS, or an inline <svg> with linked shapes, are more flexible and easier to make accessible.

If you do use a <map>, give every <area> meaningful alt text describing where it leads, since the visual region itself conveys nothing to assistive technology.

Syntax

<img src="map.png" usemap="#m" alt="">
<map name="m">
  <area shape="rect" coords="0,0,100,100" href="/a" alt="Region A">
</map>

Attributes

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

Attribute Value Description
name A string (the field name used in the submitted data). Names a form control for submission.

Example

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

Best practices

  • Connect the map to its image by matching the map's name to the image's usemap="#name".
  • Give every <area> descriptive alt text.
  • Consider CSS-positioned overlaid links or an inline <svg> for responsive, accessible hotspots.
  • Remember image-map coordinates are fixed pixels and do not scale with a responsive image.

Frequently asked questions

What is an HTML image map?
A set of clickable regions over an image, defined by a <map> containing <area> hotspots.
How do I make clickable regions on an image?
Define a <map name="x"> with <area> hotspots and add usemap="#x" to the image. Or overlay links with CSS for a responsive alternative.
Are image maps accessible?
They can be if every <area> has meaningful alt text. Otherwise the hotspots are unlabeled for assistive technology.
Should I use an image map or overlaid links?
For responsive layouts, CSS-positioned links or an inline <svg> are usually more flexible than a fixed-coordinate image map.
main mark