View video tutorial

HTML <map> Tag


The <map> tag is used to define an image map.

HTML <map> Tag

The <map> element is used together with the <area> element to define an image map.

The <map> element contains many <area> elements, which define the clickable areas of the image for users to click to get relevant information.

Element Attributes

Attribute Value Description
name mapname Required. This attribute provides a name of the image map.

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.


<img src="imageformap.png" usemap="#image-map">
<map name="image-map">
    <area target="_blank" alt="Laptop" title="Laptop" href="basic/html-iFrame.jsp" coords="180,0,394,161" shape="rect">
    <area target="_blank" alt="Cup" title="Cup" href="images/html-background-image.jsp" coords="69,8,63,10,59,14,56,21,53,26,50,33,50,40,53,47,57,53,62,59,68,62,75,64,83,65,90,64,98,60,105,56,111,52,118,48,132,55,137,49,122,42,122,34,122,26,119,19,112,11,105,6,96,4,86,5,77,6" shape="poly">
    <area target="_blank" alt="Note" title="Note" href="basic/html-emojis.jsp" coords="3,111,138,85,170,247,30,276" shape="poly">
Try it Now »

Click on the "Try it Now" button to see how it works.