HTML map - how to use <map> tag

The HTML <map> tag is used to define an image map. An image map is an image that contains multiple clickable areas.

The clickable areas within the map are defined using the <area> tag.

Attributes

The map tag supports the global and event attributes.

name
Defines the name of the image map. Note that the name attribute is required.

Examples:

<img src="file.png" width="300" height="200" alt="Map" usemap="#worldmap"> <map name="worldmap"> <area shape="rect" coords="0,0,82,126" href="America.htm1" alt="America"> <area shape="circle" coords="90,58,3" href="China.htm1" alt="China"> <area shape="circle" coords="124,58,8" href="Australia.htm1" alt="Australia"> </map>

Related HTML tags and attributes:

  • <area> - used to define clickable areas on the image
  • <usemap> - used to define a relation between the image and map