Area HTML

HTML <area> Tag

To specify the area inside an image map, the HTML <area> tag is used with the <map> element. An image-map is an image with clickable or active areas, associated with the hyperlinks. These areas perform a specified action when clicked. Multiple <area> elements can be used in a single <map> element to hyperlink different areas to various locations inside an image map.

The following is required to define an image map:

An HTML <img> element with the “usemap” attribute. It is used to specify a valid map name.
An HTML <map> element with “name” attribute. The value of the “name” attribute must be the same as that of the “usemap” attribute.
An HTML <area> element or multiple <area> elements inside a <map> element. It is used to create clickable areas in an image map.

Syntax:

Attributes:

shape: This attribute is used to define the shape like rectangle, circle, square, and polygon of an area.

coords: This attribute is used to specify the coordinates of areas inside the image.

Example:

<!DOCTYPE html>
<html>
<body>
<p>Click on either of the Sun, Mercury or Venus present in the image</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>

Explanation:

In the above example, we are using the HTML <area> tag, to specify the area inside an image map.

Tag-specific attributes:

Attribute	Value	Uses
alt	text	To display an alternative text on the browser if the image is not displayed.
coords	x1,y1,x2,y2(rect)	To specify the coordinates for the upper left and lower right of a rectangle.
	x,y, radius(circle)	To specify the coordinates for the circle.
	x1,y1,x2,y2,x3,y3,..(polygon)	To specify the polygon vertices.
href	URL	To determine the hyperlink destination for the active area.
target	_blank	To open the link in a new window.
	_parent	To open the link in the parent frame.
	_self	To open the link in the current window.
	_top	To open a link with full width in the same window.
	frame_name	To open the link in the frame.
shape	default	To specify the default area which is rectangular.
	rect	To specify the rectangular area.
	circle	To specify the circular area.
	poly	To specify the polygonal.
download	filename	To specify that the specified file will be downloaded by clicking the hyperlink.
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	To specify the relationship between the current and linked document.
hreflang	language_code	To define the language of the linked resource.
type	media_type	To define the MIME type of the linked source.

Global attribute:

The HTML global attributes are supported by the HTML <area> tag.

Event attribute:

The HTML event attributes are supported by the HTML <area> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera, and Safari.