HTML <area> Tag

Definition and Usage

<area> tags define areas within image maps (image maps are images with clickable areas, also known as client-side partition response maps).

<area> element is always nested in <map> taginside.

Note:<img> in usemap attribute with <map> element of name attributeRelates to, creates a link between images and maps.

See also:

HTML DOM Reference Manual:Area Object

Instance

Example 1

Image map with clickable areas:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">

Example 2

Another image map with clickable areas:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">

Specifies the alternative text of the area. It is required if the href attribute exists.
Specifies the coordinates of the area.
Specifies what will be downloaded when the user clicks on the hyperlink.
Specifies the hyperlink target of the area.
Specifies the language of the target URL.
Specifies the media/device optimized for the target URL.
Specifies the reference information to be sent along with the link.
Specifies the relationship between the current document and the target URL.
Shape
  • Default
  • Rect
  • Circle
  • Poly
 Specifies the shape of the area.
target
  • Frame name
 Specifies where to open the target URL.
type Media type Specifies the media type of the target URL.

Global attributes

<area> The tag also supports Global attributes in HTML.

Event attributes

<area> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <area> Element:

area {
  display: none;
{}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support