HTML - how to use <area> tag

The <area> tag can only be used within a <map> tag and it defiens an clickable area within an image map. An imagemap is basically an image with multiple multiple clickable areas that can contain different functionalities.


The area tag supports the global and event attributes. The additional attributes are mentioned below.

A text description of the clickable area within the imagemap. The text is used if the browser cannot display the image and it is only required if the href attribute is defined.
Possible Values: text
This refers to the coordinates. It contains a set of values that defines the coordinates for the area. The values and its meanings depend on the value for the shape attribute for the area.
For rectangular "rect" shape, the coords value contain 2 x,y pairs. For polygon, the coords contains n number of x,y pairs. For circle, the coords contains x,y,r values where x & y defines the center and r defines the radius of the circle. All values are in CSS pixels.
The purpose is the same as for the download attribute within the links and allows the user to download a file.
This indicates the link for the area.
This indicates the language of the link.
Use only if href is present.
This indicates the media the linked resource is optimised for.
Use only if href is present.
This indicates the relation between current and the target link.
Use only if href is present. Check the link types for all the possible values.
This indicates the shape pfthe target area.
Possible values includes default, rect, poly, circle.
This is same as the target attribute in a link and refers to where to open the link defined in the area.
Possible values include _blank, _parent, _self, _top
This indicates the mime type for the target link. This is optional and is used to provide information to the browser.


<div> <img src="map.gif" width="145" height="126" alt="World Map" usemap="#worldmap"> <map name="worldmap"> <area shape="rect" coords="0,0,100,200" href="usa.htm" alt="USA"> <area shape="circle" coords="90,60,30" href="australia.htm" alt="Australia"> <area shape="circle" coords="100,50,10" href="india.htm" alt="India"> </map> </div>