Web4College

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.

Example
Try it
<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" />
</map>
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

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

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

It represents the coordinates of the area on the image.

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

It downloads the navigating area.

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

It represents the address (URL) of the link.

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

It represents the language of the linked resource.

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

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

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

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

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

defines the browsing mode for the link.

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

It defines the type of content.

Example
Try it
<area href="circ.html" shape="circle" coords="196,89,33" type="text/html" >
<img>, <map>