HTML <area> Tag

Description:

The <area> tag is used for defining an area in an image map.

This tag is used in conjunction with the <map> tag and <img> tag to create an image map.

Example Code:
<img alt="Shapes" height="102" src="image/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>
Result:
Shapes Circle Rectangle Triangle Default
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