HTML map Tag

HTML<map>Tag: The HTML<map> tag defines a client-side image-map. In HTML map tag an image-map is an image with different clickable areas. While the required name attribute of the <map> element is associated with the <img>’s usemap attribute and creates a relationship between the image and the map. And the <map> element contains a number of <area> elements, that defines the clickable areas in the image map.

HTML<map>Tag

Syntax: <map name = “mapname “>content</map>

Browser compatibility

The HTML<map>tag is supported by different types of browsers.

Chrome
Firefox
Opera
Safari
Internet Explorer

Example:

<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<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>
</body>
</html>

Output:

HTML map tag

AFTER CLICKING ON THE PLANETS

html map tag

Attributes supported by the <map> tag

Attribute	Value	Description
name	mapname	Specifies the name of an image-map