HTML / HTML Tags

HTML <Map> Tag

Oct 12, 2022
2 min read
HTML map Tag

Definition

The <map> element along with the <img> element and any <area> descendants define an image map.

Example

<img
      src="https://res.cloudinary.com/thewebmaster/image/upload/f_auto,q_auto,w_600/image/moon-earth.png"
      width="600"
      height="337.5"
      alt="Area Tag Demo."
      usemap="#workmap"
    />

    <map name="workmap">
      <area
        shape="circle"
        coords="178,171,133"
        alt="Earth"
        href="https://en.wikipedia.org/wiki/Earth"
        target="_blank"
      />
      <area
        shape="circle"
        coords="455,130,80"
        alt="Moon"
        href="https://en.wikipedia.org/wiki/Moon"
        target="_blank"
      />
    </map>

Usage

  • The <map> element must use the name attribute. This creates a relationship between the <img> element and the <map> element.
  • The <map> element along with the <img> element and any <area> descendants defines an image map.
  • The <map> element can contain multiple <area> elements to define multiple clickable areas.
  • Both the opening and closing tag are required.
  • Image maps do not work with AMP pages.

Attributes

The `’ element supports the Global Attributes, as well as the following:

  • name

    The name attribute specifies the name of the map to be linked to the <img> element via the usemap attribute. For example, the <img> usemap attribute should be the same (with a hash at the beginning) as the <map> name attribute.

Best Practices

  • Use each image map only once. If you wish to use multiple images with the same map, you should duplicate the map and use different map names and IDs.
  • Place the <map> element as a direct sibling to the <img> element.
  • Use meaningful alt text for the image, as well as the <area> elements.
  • Never use image maps for navigation.
  • Do not use image maps for AMP pages.
  • Only use image maps only if required for a better presentation of the information. An example is a location map.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes