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 `

• 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

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile