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.

Attributes

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

alt
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
coords
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.
download
The purpose is the same as for the download attribute within the links and allows the user to download a file.
href
This indicates the link for the area.
hreflang
This indicates the language of the link.
Use only if href is present.
media
This indicates the media the linked resource is optimised for.
Use only if href is present.
rel
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.
shape
This indicates the shape pfthe target area.
Possible values includes default, rect, poly, circle.
target
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
type
This indicates the mime type for the target link. This is optional and is used to provide information to the browser.

Examples:

<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>