The area tag is used to define an area inside an image map. The area tag is used as a child of a map element. The area tag defines clickable regions on image map.
Table of Contents
The area tag is always used inside the map tag. Using the area tag, different regions of image map are linked to different locations. The area of image map are defined using shape and coords attributes.
Syntax of area Tag
The area tag is always put inside the map tag. In XHTML area tag has both opening and closing tag but in HTML area tag has no ending tag. The syntax of area tag is shown below.
<!DOCTYPE html>
<html>
<body>
<img src="logo.jpg" usemap="logo-map">
<map name="logo-map">
<area shape="rect" coords="0,0,222,126" href="rectangle.jpg" />
<area shape="circle" coords="256,54,10" href="circle.jpg" />
</map>
</body>
</html>
In the above code as you can see that the usemap attribute of the img tag and name attribute of the map tag has same value. This makes a relationship between the two elements.
Then two area tags are used inside this map to mark some specific areas on the image. These areas are of rectangular and circular shapes and they are defined using the coordinates.
Attributes of area Tag
Most common attributes used inside area tag are as follow.
Coords Attribute in area Tag
The coords attribute defines the coordinates of the area.
Shape Attribute in area Tag
The shape attribute defines the shape of the area.
Href Attribute in area Tag
The href attribute defines the hyperlink of the area.
Default Styling of area Tag
The area tag is a block-level element but by default it's display property is set to none.
Global Attributes support in area Tag
Global Attributes are supported in area tag.
Event Attributes support in area Tag
Event Attributes are supported in area tag.
Browser Support for area Tag
All major browsers support the area tag.
Note: More attributes are supported for area tag in HTML5 than HTML4.01.
HTML area Tag Video
Watch our video on HTML area Tag and subscribe our Youtube Channel.