HTML area Tag

HTML area Tag

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.

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.

HTML anchor Tag HTML abbr Tag HTML acronym Tag HTML address Tag HTML applet Tag HTML area Tag HTML article Tag HTML aside Tag HTML audio Tag HTML b Tag HTML base Tag HTML basefont Tag HTML bdi Tag HTML bdo Tag HTML big Tag HTML blockquote Tag HTML body Tag HTML br Tag HTML Button Tag HTML Canvas Tag HTML Caption Tag HTML Center Tag HTML Cite Tag HTML Code Tag HTML Col Tag HTML colgroup Tag HTML comment Tag HTML data Tag HTML datalist Tag HTML dd Tag HTML del Tag HTML details Tag HTML dfn Tag HTML dialog Tag HTML dir Tag HTML div Tag HTML dl Tag HTML Doctype Tag HTML dt Tag HTML em Tag HTML embed Tag HTML fieldset Tag HTML figcaption Tag HTML figure Tag HTML font Tag HTML footer Tag HTML form Tag HTML frame Tag HTML frameset Tag HTML Heading Tags HTML head Tag HTML header Tag HTML hr Tag HTML html Tag HTML i Tag HTML iframe Tag HTML img Tag HTML input Tag HTML ins Tag HTML kbd Tag HTML label Tag HTML legend Tag HTML li Tag HTML link Tag HTML main Tag HTML map Tag HTML mark Tag HTML meta Tag HTML meter Tag HTML nav Tag HTML noframes Tag HTML noscript Tag HTML object Tag HTML ol Tag HTML optgroup Tag HTML option Tag HTML output Tag HTML p Tag