HTML5 <map> Tag

Example

An image-map, with clickable areas:

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

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

Try it yourself »

Definition and Usage

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.

The name attribute is required in the map element. This attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The map element contains a number of area elements, that defines the clickable areas in the image map.

Differences Between HTML 4.01 and HTML5

None.

Tips and Notes

Note: The area element is always nested inside the map element. The area element defines the regions in the image map.

Attributes

Attribute Value Description
name unique name Defines a unique name for the map tag, so it can be referred to.

Standard Attributes

The <map> tag also supports the Standard Attributes in HTML5.

Event Attributes

The <map> tag also supports the Event Attributes in HTML5.