HTML Tag Reference - HTML tag <area>
<area> defines the clickable area on a graphic or image.
The clickable area is defined using the shape and the coords attributes.
A shape can be a rectangle, square, or other geometric shape. The coords (coordinates) are used to define the size and positioning of the clickable area inside the image attributes.
This element is used in conjunction with the <map> element,
which in turn is referenced by the usemap attribute of the <img> element.
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
<area> |
Yes | Yes | Yes | Yes | Yes |
What's new in HTML5
HTML5 has defined new attributes, and some HTML 4.01 attributes are deprecated.
Attribute
- alt
- Required if the href attribute is present. An alternate text for the area.
- coords
- the coordinates of the area
- download
- the target will be downloaded when clicking the hyperlink
- href
- the hyperlink target for the area
- hreflang
- the language code of the URL
- media
- media/device for the URL
- nohref
- Not supported in HTML5. An area with no associated link.
- rel
- Possible values:alternate|author|bookmark|help|license|next|nofollow| noreferrer|prefetch|prev|search|tag. Relationship between the current document and the URL.
- shape
- Possible value:default|rect|circle|poly. The shape of the area.
- target
- Possible value:_blank|_parent|_self|_top|framename. where to open the target URL.
- type
- media type for URL
Global Attributes
The <area> tag supports the Global Attributes in HTML.
Event Attributes
The <area> tag supports the Event Attributes in HTML.
Default CSS Settings
area {
display: none;
}
Example
A demo showing how to use area tag.
<html>
<body>
<img src="http://java2s.com/style/download.png"
width="200"
height="100"
usemap="#myMap">
<map name="myMap">
<area shape="rect"
coords="0, 0, 100, 50"
href="http://www.w3c.com">
<area shape="rect"
coords="100, 0, 200, 50"
href="http://www.microsoft.com">
<area shape="rect"
coords="0, 50, 100, 100"
href="http://www.msn.com">
<area shape="rect"
coords="100, 50, 200, 100"
href="http://www.yahoo.com">
</map>
</body><!-- ww w .jav a 2 s . c om-->
</html>