What is map element in HTML?

The <map> element is used to define an image map. An image map is an image with clickable areas.

Syntax

The <map> element is linked with the image we want to make clickable using the usemap attribute of the <img> tag. In the name attribute of the <map> tag, we will provide the name used in the usemap attribute, but without the preceding #.

The example below shows the syntax:

<img src="bookshelf.jpg" alt="Books" usemap="#bookmap" width="400" height="379">
<map name="bookmap">

In the body of the <map> tag, we have to define <area>tags which divides the image into clickable areas.

In the <area> element, the coords attribute specifies the coordinates of an area in the image map, and shape specifies the size, shape, and placement of the area.

<map name="bookmap">
<area shape="rect" coords="35,50,270,350" alt="Book1" href="book1.htm">
<area shape="rect" coords="290,172,333,250" alt="Book2" href="book2.htm">
</map>

Example

Here is an example of how the map tag can make certain areas of the image clickable. After running the code, the Google logo is loaded. Clicking on the image, the Google webpage is opened in the new tab. You can experiment with more <area> tags with different coordinates to see how positioning works. The coordinates for the rectangle shape in our example are given in the order x1,y1,x2,y2. They specify the coordinates of the top left and bottom right of the rectangle: