HTML: <area> tag

This HTML tutorial explains how to use the HTML element called the <area> tag with syntax and examples.

Description

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

Syntax

In HTML, the syntax for the <area> tag is: (example creates an image map using chem.png with two clickable areas with hyperlinks to the Hydrogen and Lithium pages)

<body>

  <img src="chem.png" width="500" height="500" alt="Elements" usemap="#chemistry">
  
  <map name="chemistry">
    <area shape="rect" coords="0,0,20,60" href="h.php" alt="Hydrogen">
    <area shape="circle" coords="150,175,50" href="li.php" alt="Lithium">
  </map>

</body>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <area> tag:

Attribute	Description	HTML Compatibility
shape	Shape of the clickable area. It can be one of the following values: circle, rect, poly, default circle - circular region rect - rectangular region poly - polygon shaped region default - region outside of any defined shapes	HTML 4.01, HTML5
coords	Coordinate values for the clickable area which depend on the shape specified For circle: `x,y,r` values where `x,y` specify the center of the circle and `r` is the radius of the circle For rect: two `x,y` pairs specifying the left, top, right, bottom coordinates of the rectangle For poly: `x,y` values for each point on the polygon `x1,y1,x2,y2,x3,y3,...`	HTML 4.01, HTML5
alt	Alternative text to display if image can not be displayed	HTML 4.01, HTML5
download	Indicates that the hyperlink will be used to download a resource	HTML5
href	Hyperlink for the clickable area. This attribute may be omitted in HTML5. In HTML4, this attribute must be either a valid URL or you must use the nohref attribute	HTML 4.01, HTML5
hreflag	The language of the linked resource. You must specify this attribute if you provide a value for the href attribute	HTML5
name	Name of the clickable area for older browsers	HTML 4.01
nohref	Use this attribute to indicate that no hyperlink exists for this clickable area in HTML4	HTML 4.01
ping	List of URLs (space separated) that POST requests with the body PING will be sent in the background by the browser when the hyperlink has been followed. This can be used for tracking purposes.	HTML 4.01, HTML5
rel	Relationship between the document and the hyperlink if you provide a value for the href attribute. It can be one of the following values: alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag	HTML5
tabindex	Numeriic value indicating the tab index position of the clickable area in the browser tabbing order	HTML 4.01
target	Specifies where to display the linked resource. It can be one of the following values: _self, _blank, _parent, _top _self - means that the resource loads into the current frame or context _blank - means that the resource loads into a new window or context _parent - means that the resource loads into the parent frame or context _top - means that the resource loads into the full, original window	HTML 4.01, HTML5

Note

The HTML <area> element is found within the <body> tag and must be found inside of a <map> tag.
The usemap attribute for the <img> tag is must be the same as the name attribute for the <map> tag creating a relationship between these two elements.

Browser Compatibility

The <area> tag has basic support with the following browsers:

Chrome
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
Edge Mobile
Opera
Opera Mobile
Safari (WebKit)
Safari Mobile

Example

We will discuss the <area> tag below, exploring examples of how to use the <area> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

HTML5
HTML4
XHTML

HTML5 Document

If you created a new web page in HTML5, your <area> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Chemistry Elements</h1>

<img src="chem.png" width="500" height="500" alt="Elements" usemap="#chemistry">
  
<map name="chemistry">
  <area shape="rect" coords="0,0,20,60" href="h.php" alt="Hydrogen">
  <area shape="circle" coords="150,175,50" href="li.php" alt="Lithium">
</map>

</body>

</html>

In this HTML5 Document example, we have created an image map using the image file called chem.png that has two cilckable areas defined within it using the <area> tag. The first clickable area is a rectangle shape that links to the Hydrogen page called h.php. The second clickable area is a circle shape that links to the Lithium page called li.php.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <area> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Chemistry Elements</h1>

<img src="chem.png" width="500" height="500" alt="Elements" usemap="#chemistry">
  
<map name="chemistry">
  <area shape="rect" coords="0,0,20,60" href="h.php" alt="Hydrogen">
  <area shape="circle" coords="150,175,50" href="li.php" alt="Lithium">
</map>

</body>

</html>

In this HTML 4.01 Transitional Document example, we have created an image map using the image file called chem.png that has two cilckable areas defined within it using the <area> tag. The first clickable area is a rectangle shape that links to the Hydrogen page called h.php. The second clickable area is a circle shape that links to the Lithium page called li.php.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <area> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Chemistry Elements</h1>

<img src="chem.png" width="500" height="500" alt="Elements" usemap="#chemistry" />
  
<map name="chemistry" id="chemistry">
  <area shape="rect" coords="0,0,20,60" href="h.php" alt="Hydrogen" />
  <area shape="circle" coords="150,175,50" href="li.php" alt="Lithium" />
</map>

</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created an image map using the image file called chem.png that has two cilckable areas defined within it using the <area> tag. The first clickable area is a rectangle shape that links to the Hydrogen page called h.php. The second clickable area is a circle shape that links to the Lithium page called li.php.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <area> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<h1>Chemistry Elements</h1>

<div>
  <img src="chem.png" width="500" height="500" alt="Elements" usemap="#chemistry" />
</div>

<div>
  <map name="chemistry" id="chemistry">
    <area shape="rect" coords="0,0,20,60" href="h.php" alt="Hydrogen" />
    <area shape="circle" coords="150,175,50" href="li.php" alt="Lithium" />
  </map>
</div>

</body>

</html>

In this XHTML 1.0 Strict Document example, we have created an image map using the image file called chem.png that has two cilckable areas defined within it using the <area> tag. The first clickable area is a rectangle shape that links to the Hydrogen page called h.php. The second clickable area is a circle shape that links to the Lithium page called li.php.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <area> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Chemistry Elements</h1>

<div>
  <img src="chem.png" width="500" height="500" alt="Elements" usemap="#chemistry" />
</div>

<div>
  <map name="chemistry" id="chemistry">
    <area shape="rect" coords="0,0,20,60" href="h.php" alt="Hydrogen" />
    <area shape="circle" coords="150,175,50" href="li.php" alt="Lithium" />
  </map>
</div>

</body>

</html>

In this XHTML 1.1 Document example, we have created an image map using the image file called chem.png that has two cilckable areas defined within it using the <area> tag. The first clickable area is a rectangle shape that links to the Hydrogen page called h.php. The second clickable area is a circle shape that links to the Lithium page called li.php.