HTML <area>
Tag
Example
Image map with clickable areas:
<img decoding="async" src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Browser Support
All major browsers support the <area>
tag.
Tag Definition and Usage
The <area>
tag defines an area inside an image map (an image map is an image with clickable areas).
The <area>
element is always nested inside a <map>
tag.
Note: The usemap
attribute in the <img>
tag is associated with the name
attribute in the <map>
element to create a relationship between the image and the map.
Differences Between HTML 4.01 and HTML5
HTML5 provides some new attributes and no longer supports some attributes from HTML 4.01.
Differences Between HTML and XHTML
In HTML, the <area>
tag has no closing tag.
In XHTML, the <area>
tag must be properly closed.
Attributes
Attribute |
Value |
Description |
alt |
text |
Specifies alternative text for the area. Required if the href attribute is present. |
coords |
coordinates |
Specifies the coordinates of the area. |
href |
URL |
Specifies the target URL for the area. |
hreflang New |
language_code |
Specifies the language of the target URL. |
media New |
media query |
Specifies what media/device the target URL is optimized for. Default: all. |
nohref |
value |
Not supported in HTML5. Specifies that an area has no associated link. |
rel New |
alternate <br>author <br>bookmark <br>help <br>license <br>next <br>nofollow <br>noreferrer <br>prefetch <br>prev <br>search <br>tag |
Specifies the relationship between the current document and the target URL. |
shape |
default <br>rect <br>circle <br>poly |
Specifies the shape of the area. |
target |
_blank <br>_parent <br>_self <br>_top <br> framename |
Specifies where to open the target URL. |
type New |
MIME_type |
Specifies the MIME type of the target URL. <br>Note: MIME = Multipurpose Internet Mail Extensions. |
Global Attributes
The <area>
tag supports HTML global attributes.
Event Attributes
The <area>
tag supports HTML event attributes.
Related Articles
HTML DOM Reference: Area Object