HTML <area> tag

Use of <area> tag

The <area> tag is used to define an area inside an image generally associated with a link. Inorder to define an image-map, we should use attributes of <area> tag.
This element should be used only within the <map> element.
Type: Empty tag

Example of <area> tag

<img src = "box.png" usemap = "#demo">
<map name = "demo">
<area shape = "rect" coords = "47,68,220,150" href = "URL">
<area shape = "circle" coords = "373,107,52" href = "URL">
</map>

The following criteria must be fulfilled to define an image-map (image with clickable areas):
<img> tag should be used to import an image. Also, this tag must have usemap attribute with any value (texts or numbers) preceding with "#".
<map> tag should be used with name attribute. Be sure to add </map> tag whenever <map> is used.
The value of the name attribute (of <map> tag) must be same with the value of the usemap (of <img> tag) without "#".
For example, if the value of name attribute is demo, then the value of usemap attribute must be #demo and vice-versa.
Then, use area tag within the map tag. An <area> tag defines one clickable area within an images, two <area> tags define two clickable areas and so on.
Lastly, you have to use the attributes of <area> tag according to your needs. But, the shape and coords attributes are compulsory.

Supported Browsers

Tag Chrome browser Internet explorer browser Firefox browser Safari browser Opera browser
<area> Yes Yes Yes Yes Yes

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src = "box.png" alt = "box" usemap = "#demo">
<map name = "demo">
<area shape = "rect" coords = "47,68,220,150""24,36,119,82" target = "_blank" href = "area_rect.html">
<area shape = "circle" coords = "373,107,52""199,57,28" target = "_blank" href = "area_circle.html">
</map>
<p> Note that the value of coords attribute is based on the original size of the image. </p>
</body>
</html>

Output

illustration of area tag
Note that the value of coords attribute is based on the original size of the image.

illustration of area tag
Note that the value of coords attribute is based on the original size of the image.

On the above image, two image-map are found: small rectangle and small circle.

Click here, to know how to give coords value of the image-map.

Attributes of <area> tag

Attribute Value Notes
alt text It specifies the alternate texts for an area if the image could not load due to some reasons like slow-net.
coords coordinates It specifies the coordinates of an image-map or multiple areas in an image.
download filename It allows download the target URL when the users click on it.
href URL It specifies the HyperLink target for the area of image-map.
hreflang language_code It specifies the language of the linked resource.
media media query It defines a hint for the media for which the linked resource has designed.
nohref It indicates no HyperLink exists in the associated <area> element.
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
It defines the relationship between the current document with the linked (target) document.
shape default
rect
circle
poly
It specifies the shape of the associated image-map.
target _self
_blank
_parent
_top
It specifies where to display the linked resources.
type media_type It specifies the media type of the target URL.

More Reference

It is nearly found that many websites use image-map. Since it comes up with a visual theme, visitors could better understand on the given topic. The best way of using of image-map is the illustration of maps. For example, all the states in a country can be made more interactive whenever image-map is used.
Too much image-maps are not convenient for the users having slow-net because it needs an image often fairly large, and a <map> tag with <area> tag inside it. Make sure your image is optimized to be really small and hence reduce load time. Also, it is not easy to identify and point out the image-maps and consumes many times to build it. Use image-map editor like Dreamweaver or Frontpage. The image-map could not be responsive image. Never use it for navigation because navigation should be the easiest and most self-explanatory portion of your site. Also, they don't act like standard links and can be difficult to figure out.