Summary -
In this topic, we described about the <area> tag along with detailed example.
Defines an area in an image. The <area> tag is used for defining an area in an image. In other words, it is a region of the image map.
Image map is nothing but images with clickable areas which normally links to another page. The <area> tag is always nested inside a <map> tag. <area> tag has no ending or closing tag as it is an empty element.
The basic <area> tag is can be coded like <area shape="" coords="" href=""> with the shape, coordinates, and link.
Syntax -
<area>…</area>
Optional Attributes -
| Attribute | Description | Values |
|---|---|---|
| alt | Specifies alternative text when image is not available. Required if the href attribute is present. | Text |
| coords | Specifies pixel coordinates of the area and its shape. | For rectangular: comma-separated list of four values for left, top, right and bottom.
For circular: comma-separated list of three values for left, top and radius. For polygonal: comma-separated list containing an even number of values, specifying the left and top of each point of the shape |
| download | Specifies the target should be downloaded instead of navigated to. <font color="green">HTML5 attribute</font> | None. |
| href | Specifies the destination the area. | URL. |
| hreflang | Specifies the language of the target link. This attribute can be used if href is used <font color="green">HTML5 attribute</font> | Language code |
| Media | Specifies media/device the linked document is optimized <font color="green">HTML5 attribute</font> | media_query |
| Nohref | Specifies area has no associated link. <font color="red">Not supported in HTML5</font> | Value |
| rel | Specifies the relationship between the link’s page and the link’s target destination. <font color="green">HTML5 attribute</font> |
alternate: Indicates an alternative version of the current web page.
author: Indicates author of the page / article. bookmark: link to the current section of the page. help: Indicates the Help specific to the context. license: Indicates copyright license for the current document. next: Indicates the linked next page in the sequence. nofollow: Indicates the linked resource is not certified by the current document’s author. noreferrer: Indicates the browser not to send an HTTP referrer header. prefetch: Indicates the linked resource should be cached. prev: Indicates the linked previous page in the sequence. search: Indicates the search facility used to search the current, and related, documents. tag: A tagging term that applies to the link. |
| shape | Specifies the area’s shape. |
rect: Rectangle.
This is the default value.
Circle: circle poly: Polygon. default: The area becomes the full image area. |
| target | Specifies in which the target destination should open. |
_self: Opens link in current window / tab.
_blank: Opens link in a new window / tab. |
| type | Specifies type of the linked resource. <font color="green">HTML5 attribute</font> | Text. |
Example -
<!DOCTYPE html>
<html>
<head>
<title> area example</title>
</head>
<body>
<img src="india.gif" width="400" height="600"
alt="India" usemap="#indiamap">
<map name="indiamap">
<area shape="rect" coords="0,0,200,300"
alt="North India">
<area shape="rect" coords="200,300,200,200"
alt="South India">
</map>
</body>
</html>