HTML <area> Tag

Description

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.

Properties

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

Example

<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"/>
</map>
<script>
function clicked_on ( clicked_shape )
{
alert ( "You clicked on the " + clicked_shape );
}
</script>

Attributes

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.
rel

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
shape

Specifies the shape of an area.
Possible Values:

  • default
  • rect
  • circle
  • poly
target

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

Desktop
Explorer Edge Chrome Firefox Opera Safari
YesYesYes1YesYes
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
YesYes4YesYesYes