HTML <area> Tag

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

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

Result

Editor

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.