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

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
Yes	Yes	Yes	1	Yes	Yes
Tablets / Mobile
Yes	Yes	4	Yes	Yes	Yes

Last updated by CSSPortal on: 6th December 2019