HTML Reference Manual

HTML Tag大全

HTML: <area> Tag

The HTML <area> tag defines clickable areas (or hotspots) within an image map. You can associate hyperlinks with this clickable area. This tag must be within the <map> tag. This tag is also commonly referred to as the <area> element.

Online Example

Clickable area image mapping:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial Website(oldtoolbag.com)/title>　
</head>
<body>
<img 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.html">
　　<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.html">
　　<area shape="circle" coords="124,58,8" alt="Venus" href="venus.html">
</map>
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support the <area> tag.

Definition and usage instructions

The <area> tag defines an area within the image map (an image map is an image with clickable areas).

The <area> element is always nested inside the <map> tag.

The HTML <area> element is located within the <body> tag and must be within the <map> tag.

Note: <img> The usemap attribute in the <map> elements in the name associated with the element to create a relationship between the image and the map.

HTML 4.01 with HTML5differences

HTML5 Provided some new attributes and no longer supports HTML 4.01 Some attributes in the

Differences between HTML and XHTML

In HTML, the <area> tag does not have a closing tag.

In XHTML, the <area> tag must be closed correctly.

Attribute

New: HTML5 new attribute in the

Attribute	Value	Description
alt	text	Specify the alternative text for the region. This attribute is required if the href attribute is used.
coords	coordinates	Specify the coordinates of the region.
href	URL	Specify the target URL for the region.
downloadHTML5	filename	When the user clicks on the hyperlink, the specified target file will be downloaded.
hreflangHTML5	language_code	Specify the language of the target URL.
mediaHTML5	media query	Specify the target URL for what medium/Device optimization. Default: all.
nohref	value	HTML5 Not supported. Specifies areas without related links.
relHTML5	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	Specifies the relationship between the current document and the target URL.
shape	default 　rect circle poly	Specifies the shape of the area.
target	_blank 　_parent 　_self 　_top framename	Specifies where to open the target URL.
typeHTML5	MIME_type	Specifies the MIME type of the target URL. Note: MIME = Multipurpose Internet Mail Extensions.

Global Attributes

The <area> tag supports HTML Global Attributes.

event attributes

The <area> tag supports HTML Event Attributes.

HTML DOM Reference Manual: Area Object

HTML: <article> Tag HTML: <applet> Tag