HTML area Tag
This <area> tag is used in an HTML document to map a portion of an image to make it clickable by the end-user. It is used to direct the user to different links after the user clicks on the mapped portions of the image. It is used as a child tag of the <map> tag. It has no closing tag and hence it is an empty tag for HTML but incase of XHTML you need to close that properly. HTML5 has some new attributes.
Syntax:
<area>
Attributes of <area> tag:
| Value | Description |
|---|---|
| shape | The shape to be mapped on the image, it can be a “rect” , a “circle” or a “poly”. |
| coords | The coordinates of the shape |
| href | href is the link where the user will be directed to after clicking the mapped portion of the image |
| alt | Alternative text for a clickable area in an image map |
| download | Download target when hyperlink is clicked. |
| target | Context in which to open the link resource |
| hreflang | Language of targeted URL. |
| media | Optimized URL for media or device. |
| rel | Relationship between URL and document. |
| type | Media type of URL |
Example: <area> tag in html.
<!DOCTYPE html> <html> <head> <title>Area Tag</title> <style> body { text-align: center; } h1 { color: green; } </style> </head> <body> <img src= alt="" width="300" height="119" class="aligncenter size-medium wp-image-910965" usemap="#shapemap" /> <map name="shapemap"> <!-- area tag contained image. --> <area shape="poly" coords="59,31,28,83,91,83" href= alt="Triangle"> <area shape="circle" coords="155,56,26" href= alt="Circle"> <area shape="rect" coords="224,30,276,82" href= alt="Square"> </map> </body> </html> |
chevron_right
filter_none
Output:
- Before click on specfic clickable area
- After click on specfic clickable area
Note: This <area> tag is always nested in <map> tag.
Supported Browsers: The browser supported by <area> tag are listed below:
