HTML <map> Tag

The <map> tag is used to define an image-map, with active areas, where you can click to get more information. The clickable areas in the image map are defined using the <area> tag, nested in the <map> tag.

The <map> tag is used to connect the <img> tag with a client-side image-map. To create a relationship between the image and the map the required name attribute is used with the <map> tag, and usemap attribute with the <img> tag.


The <map> tag comes in pairs; the closing </map> tag is mandatory.


<!DOCTYPE html>
    <title>Title of the document</title>
    <p>Click on the logo or on one of the logo item to watch it closer:</p>
    <img src="/uploads/media/default/0001/01/0f94cf189afcdc39c4df2a73d230d1a7425ee66d.png"  width="145" height="126" alt="block" usemap="#blockmap">
    <map name="blockmap">
      <area shape="circle" coords="45,58,30" alt="html-book" href="">
      <area shape="circle" coords="88,64,15" alt="html-quiz" href="">
      <area shape="circle" coords="114,67,14" alt="html-snippets" href="">


Attributes Value Description
name mapname Sets the name of an image-map

The <map> element also uses the Global Attributes.

Browser support