HTML <map>Tag


Examples

Image map with clickable areas:

<img src="planets.gif.html" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm.html" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm.html" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm.html" alt="Venus">
</map>

Try it Yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Currently, most browsers support the <map> tag.

Tag Definition and Usage Instructions

The <map> tag is used for client-side image maps. An image map refers to an image with clickable areas.

The usemap attribute in <img> can reference the id or name attribute in <map> (depending on the browser), so we should add both id and name attributes to <map>.

The area element is always nested inside the map element. The area element can define areas within the image map.

Differences between HTML 4.01 and HTML5

Note:In HTML5, if the id attribute is specified in the <map> tag, you must also specify the name attribute.

Differences between HTML and XHTML

In XHTML, the name attribute has been deprecated; use the id attribute instead.

Attributes

Attribute Value Description
name mapname Required. Specifies the name for the image-map.

Global Attributes

The <map> tag supports global attributes. View the complete attribute tableHTML Global Attributes。

Event Attributes

The <map> tag supports allHTML Event Attributes。

Other Extensions