Html map tag

The HTML <map> tag is used for defining an image map.

Image maps are images that have clickable areas (sometimes referred to as "hot spots"). Each of these clickable areas can lead to a different location. Therefore, an image map could potentially have many links that lead to many different URLs.

The <map> tag is used along with the <area> and <img> tags to define the image map.

To create an image map, you use the <map> tag to declare the image map, and the <area> tag (nested within the <map> tag) to define the clickable areas. The <img> tag can be defined elsewhere on the page, and is linked to the <map> element using the name attribute.

 

Syntax

The <map> tag is typically written like this <map name=""></map> with the <area> tag nested between the start and end tags. The name attribute is used by any <img> elements that use this particular image map.

Like this:

<img src="/image.png" alt="My image" usemap="#my-map">
<map name="my-map">
  <area 
    shape="rect" 
    coords="50,50,100,100" 
    href="/box/" 
    alt="My rectangle box">
</map>

Differences Between HTML 4 & HTML 5

In HTML5, if the both the name and the (global) id attributes are specified, they must both contain the same value.

To see more detail on the two versions see HTML5 <map> Tag and HTML4 <map> Tag. Also check out the links to the official specifications below.