HTML area tag

HTML <area> element represents a specific area on an image to make a linked area. We have to specify the size on an image to make a linked area.

<img src="files/three images.jpg" usemap="#shapes" alt="shape of a circle" />

<map name="shapes">
  <area href="files/circ.html" shape="circle" coords="196,89,33" />
shape of a circle

Tag Uses

Specific uses of <area> tag

It is used to specify the area on a map.

Tag omission

area element is a self-closing tag (<area />) i.e. there is no end tag.

Global Attributes

All attributes are applicable on the area element.

Tag Attributes

Attributes that are applicable to <area> tag

alt attribute specifies alternative text when the image area is not available.

<area alt="square" href="square.html" shape="square" coords="94,122,93,58,158,58,157,122" />

It represents the coordinates of the area on the image.

<area href="rect.html" shape="rectangle" coords="94,100,120,158">

It downloads the navigating area.

<area alt="triangle" title="triangle" href="triangle.html" shape="poly" coords="13,122,50,61,86,123" download >

It represents the address (URL) of the link.

<area alt="triangle" title="triangle" href="triangle.html" shape="poly" coords="13,122,50,61,86,123" >

It represents the language of the linked resource.

<area href="circ.html" shape="circle" coords="196,89,33" hreflang="en-US" >

It represents the relation between the document containing the area and the linked source.

<area href="circ.html" shape="circle" coords="196,89,33" rel="alternate" >

defines the shape of the area. It may be circle, rectangle or a polygon.

<area href="circ.html" shape="circle" coords="196,89,33" >

defines the browsing mode for the link.

<area href="circ.html" shape="circle" coords="196,89,33" target="_blank" >

It defines the type of content.

<area href="circ.html" shape="circle" coords="196,89,33" type="text/html" >

Was this article helpful?