HTML - <area> Tag

Description

The HTML <area> tag is used for defining an area in an image map.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML area Tag</title>
   </head>

   <body>
      <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
      
      <map name = "tutorials">
         <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
         
         <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
            href = "/html/index.htm" target = "_blank" />
         
         <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
            href = "/php/index.htm" target = "_blank" />
      </map>
   </body>

</html>

This will produce the following result −

Global Attributes

This tag supports all the global attributes described in HTML Attribute Reference

Specific Attributes

The HTML <area> tag also supports the following additional attributes −

Attribute	Value	Description
alt	text	Specifies an alternate text for the area.
coords	if shape = "rect" then coords = "left, top, right, bottom" if shape = "circ" then coords = "centerx, centery, radius" if shape = "poly" then coords = "x1, y1, x2, y2,..,xn, yn"	Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps.
download	filename	Specifies that the target gets downloaded when hyperlink is clicked by user.
href	URL	Specifies the URL of a page or the name of the anchor that the link goes to.
hreflang	language_code	Specifies the language of the target URL.
media	media query	Specifies media/device the target URL is optimized for.
nohref	true/false	Excludes an area from the image map
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	Specifies relationship between the current document and the target URL
shape	rect rectangle circ circle poly polygon	Specifies the shape of the image map
target	_blank _parent _self _top	Where to open the target URL. _blank − the target URL will open in a new window _self − the target URL will open in the same frame as it was clicked _parent − the target URL will open in the parent frameset _top − the target URL will open in the full body of the window
type	mime_type	Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL.

Event Attributes

This tag supports all the event attributes described in HTML Events Reference

Browser Support

Chrome	Firefox	IE	Opera	Safari	Android
Yes	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm