HTML <area> Tag


The <area> HTML element defines the active areas of an image, which are links. A drawing with active regions attached to it is called collectively an image map. Such a map in appearance is no different from a conventional image, but it can be divided into invisible zones of various shapes, where each of the areas serves as a link. The <area> element sets the shape of the area, its size, sets the address of the document to which reference should be made. The <area> is always located in the <map> container, which associates the coordinates of the regions with the image.


Permitted Parents
Any element that accepts phrasing content. The <area> element must have an ancestor <map>, but it need not be a direct parent.
None. It is an empty element.
Start/End Tags
Start tag: required, End tag: forbidden


<img alt="Shapes" height="102" src="images/shapes.jpg" style="border: none;" usemap="#shapes" width="375" />

<map name="shapes" id="shapes">
<area shape="circle" coords="58,50,40" href="javascript:clicked_on('circle');" title="Circle" alt="Circle"/>
<area shape="rect" coords="136,11,227,89" href="javascript:clicked_on ('rectangle');" title="Rectangle" alt="Rectangle"/>
<area shape="poly" coords="309,13,358,89,257,89" href="javascript:clicked_on('triangle');" title="Triangle" alt="Triangle"/>
<area shape="default" nohref="nohref" title="Default" alt="Default"/>
function clicked_on ( clicked_shape )
alert ( "You clicked on the " + clicked_shape );


Attribute Definition
alt Alternate text. This specifies text to be used in case the browser/user agent can't render the image.
coords Specifies the coordinates of an area.
href Specifies the hyperlink target for the area.
hreflang Specifies the language of the target URL.
media Specifies what media/device the target URL is optimized for.

Specifies the relationship between the current document and the target URL.
Possible Values:

  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag

Specifies the shape of an area.
Possible Values:

  • default
  • rect
  • circle
  • poly

Specifies where to open the target URL.
Possible Values:

  • _blank
  • _parent
  • _self
  • _top
type Specifies the MIME type of the target URL.

Global Attributes

The <area> tag also supports the Global Attributes in HTML5

Event Attributes

The <area> tag also supports the Event Attributes in HTML5

Browser Support

The following table will show you the current browser support for the HTML <area> tag.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 30th September 2023