<area>

HTML <area> Tag

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="https://img.php.cn/upload/article/000/000/001/5e572220870aa252.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>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Browser support

All major browsers support the <area> tag.

Tag definition and usage instructions

<area> The tag defines the area inside the image map (image map refers to an image with a clickable area).

<area> elements are always nested inside <map> tags.

Note: The usemap attribute in the <img> tag is associated with the name 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, while some attributes in HTML 4.01 are no longer supported.

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: New attribute in HTML5.

relalternateSpecifies the relationship between the current document and the target URL. shapedefault specifies the shape of the area. target_blank specifies where to open the target URL. typeSpecifies the MIME type of the target URL.

Global attributes

<area> tag supports HTML global attributes.

Event attributes

<area> tag supports HTML event attributes.

HTML DOM Reference Manual: Area object

← <applet>

<article> →

submit

php.cn

Attribute	Value	Description
alt	text	Alternate text for specified area. This attribute is required if the href attribute is used.
coords	coordinates	Specifies the coordinates of the area.
href	URL	Specifies the target URL for the zone.
hreflangNew	language_code	Specifies the language of the target URL.
mediaNew	media query	Specifies what media/device the target URL is optimized for of. Default: all.
nohref	value	##HTML5 Not supported. Specifies areas with no relevant links.
New	author bookmark help license next nofollow noreferrer prefetch prev search tag
	rect circle Poly
	_parent _self _top framename
New	MIME_type	Note: MIME = Multipurpose Internet Mail Extensions.