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 -


Optional Attributes -

altSpecifies alternative text when image is not available. Required if the href attribute is present. Text
coordsSpecifies 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
downloadSpecifies the target should be downloaded instead of navigated to. <font color="green">HTML5 attribute</font>None.
hrefSpecifies the destination the area.URL.
hreflangSpecifies the language of the target link. This attribute can be used if href is used <font color="green">HTML5 attribute</font> Language code
MediaSpecifies media/device the linked document is optimized <font color="green">HTML5 attribute</font> media_query
NohrefSpecifies area has no associated link. <font color="red">Not supported in HTML5</font>Value
relSpecifies 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.
shapeSpecifies the area’s shape. rect: Rectangle. This is the default value.
Circle: circle
poly: Polygon.
default: The area becomes the full image area.
targetSpecifies in which the target destination should open. _self: Opens link in current window / tab.
_blank: Opens link in a new window / tab.
typeSpecifies type of the linked resource. <font color="green">HTML5 attribute</font>Text.

Example -

<!DOCTYPE html>
		<title> area example</title>

		<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">