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

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

Try </>

There are three integers in coordinate attributes.

The first integer is the distance from the center of the circle to the left edge of the image.

The second integer is the distance from the center of the circle to the top edge of the image.

The third integer is the radius of the circle.

Specific Uses

It is used to specify the area on a map.

Related tags

TagsDescription
<img> This element adds an image in a page.
<img src="imagemap.jpg" usemap="#shapes" >
<map> This element represents the map on an image.
<map name="shapes"><area href=circ.html" shape="circle" coords="196,89,33" ></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.

Specific Attributes

<area> tag attributes

TagsDescription
alt 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" />
coords It represents the coordinates of the area on the image.
<area href="rect.html" shape="rectangle" coords="94,100,120,158">
download It downloads the navigating area.
<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.
<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.
<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.
<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.
<area href="circ.html" shape="circle" coords="196,89,33" >
target defines the browsing mode for the link.
<area href="circ.html" shape="circle" coords="196,89,33" target="_blank" >
type It defines the type of content.
<area href="circ.html" shape="circle" coords="196,89,33" type="text/html" >


Was this article helpful?

 

Email:

Message:

Get the newsletter