HTML <area> Tag

Advertisements


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 following result:

usemap Perl Tutorial HTML Tutorial PHP Tutorial

Global Attributes

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

Specific Attributes

The HTML <area> tag also supports following additional attributes:

AttributeValueDescription
alt textSpecifies 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 html-5filenameSpecifies that the target gets downloaded when hyperlink is clicked by user.
href URLSpecifies the URL of a page or the name of the anchor that the link goes to.
hreflang html-5language_codeSpecifies the language of the target URL.
media html-5media querySpecifies media/device the target URL is optimized for.
nohref true/falseExcludes an area from the image map
rel html-5alternate
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 html-5mime_typeSpecifies 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

ChromeFirefoxIEOperaSafariAndroid
YesYesYesYesYesYes

html_tags_reference.htm