As we know that in case of html there are number of tags and normally every tag has its start tag and end tag, but there are some exceptions are also present. So this <area> tag is comes under the category of the exception tags.
The <area> tag is defined as area tag. It has only start <area> tag, no end tag. This tag is used to define the area inside the image-map. Image-map is an image which has clickable areas in it. The <area> tag is used always within the <map> tag. The <area> tag is normally supported by all the commonly using browsers like- Internet Explorer, Mozilla Firefox, Opera Mini, Google Chrome, Safari, etc.
The <area> tag is supported by some event, standard and other attributes. These attributes are-
Event attributes supported by the <area> tag-
| Attribute | Description |
|---|---|
| onblur | In this case the script runs when an element loses focus |
| onclick | In this case the script runs on a click of mouse |
| ondblclick | In this case the script runs on a double click of mouse |
| onfocus | In this case the script runs when an element gets focus |
| onmousedown | In this case the script runs when the mouse button is pressed |
| onmousemove | In this case the script runs when the mouse pointer moves over an element |
| onmouseout | In this case the script runs when the mouse pointer moves out of an element |
| onmouseover | In this case the script runs when the mouse pointer moves over an element |
| onmouseup | In this case the script runs when the mouse button is released |
| onkeydown | In this case the script runs when the key is pressed from the keyboard |
| onkeypress | In this case the script runs when a key is pressed and released from the keyboard |
| onkeyup | In this case the script runs when the key is released from the keyboard |
Standard attributes supported by the <area> tag-
| Attribute | Description |
|---|---|
| accesskey | It is used to specify a keyboard shortcut to access an element |
| class | It is used to specify the classname for an element |
| dir | It is used to specify the text direction of the content in an element |
| id | It is used to specify the unique id of an element |
| lang | It is used to specify the language code of the content in an element |
| style | It is used to specify an inline style of an element |
| tabindex | It is used to specify the tab order of an element |
| title | It is used to specify an extra information about an element |
Other attributes supported by the <area> tag-
| Attribute | Description |
|---|---|
| coords | It is used to specify the coordinates of an area |
| href | It is used to specify the hyperlink target for the area |
| nohref | It is used to specify that the area has no associated link |
| shape | It is used to specify the shape –rectangle, circle, poly, etc.- of an area |
| target | It is used to specify that where we want to open the linked page, on blank, parent, self or top |
Example-
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.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>Output -
Click on the sun or on one of the planets to watch it closer:
