HTML <area> tag


With clickable image map area:

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

Try it yourself

Browser Support

IE Firefox Chrome Safari Opera

All major browsers support <area> tag.

Definition and Usage

<Area> tag defines an image map of the area (Note: refers to the image map is an image with clickable areas).

area element is always nested within the <map> tag.

NOTE: <IMG> tag usemap attributes map element name associated attributes, create a link between the image and the map.

Differences between HTML and XHTML

In HTML, <area> tag is not over.

In XHTML, <area> must be closed properly.

Tips and Notes:

NOTE: <img> attributes can be referenced in usemap <map> The id or name attribute (determined by the browser), so we need to to <map> add id and name two properties.

Required attributes

Attributes value description
alt text Replace the definition text for this area.

Optional attributes

Attributes value description
coords Coordinate values Define clickable areas (mouse-sensitive areas) coordinates.
href URL Define the target URL for this region.
nohref nohref Exclude an area from an image map.
  • default
  • rect
  • circ
  • poly
Define the shape of the region.
  • _blank
  • _parent
  • _self
  • _top
Provisions to open the target URL href attribute specified location.

Global Properties

<area> tag supports HTML in the global properties .

Event Properties

<area> tag supports HTML in the event properties .

Related Pages

HTML DOM Reference Manual: Area Objects