Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <map> tag.

Use of <map> tag

The <map> tag is used to define an image map (a clickable link area) by using <area> attribute.

Display:Inline

Example of <map> tag

    <img src="map.png" height="222" width="504" alt="demo" usemap="#demo">
     <map name="demo">
     <area shape="rect" coords="47,68,220,150" href="" target="_blank" alt="rectangle">
       <area shape="circle" coords="373,107,52" href="" target="_blank" alt="Circle">
    </map>

Click here, to learn <area> tag.

Supported Browsers.

Tag
<map> Yes Yes Yes Yes Yes

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="map.png" height="222" width="504" alt="demo" usemap="#demo">
<map name="demo">
<area shape="rect" coords="47,68,220,150" href="" target="_blank" alt="rectangle">
<area shape="circle" coords="373,107,52" href="" target="_blank" alt="Circle">
</map>
</body>
</html>

Output

demo rectangle Circle

More Reference


You have come across that using <map> element, you can assign multiple links within a single image.The image and the <map> element is linked together by making a custom map-name which must be equal with the usemap attribute(beginning with #) of the <img> element.
To know what i mention above,see the following true and wrong example

True example

<img src="map.png" height="222" width="504" alt="demo" usemap="#demo">
<map name="demo">
-------------------------------------------------------------
</map>

False example

<img src="map.png" height="222" width="504" alt="demo" usemap="#demo">
<map name="example">
-------------------------------------------------------------
</map>

Be sure to add hashname such as #demo to the value of the usemap attribute.

Default CSS properties of <map> tag

map {
   display:inline;
}

Attribute of <map> tag


Attribute Value Notes
name mapname It assigns a name to an image-map.