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.