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 in the case of XHTML you need to close that properly. HTML5 has some new attributes.
Syntax:
<area>
Attributes: This tag accepts lots of attributes as described below.
- shape: The shape to be mapped on the image, can be a “rect”, a “circle” or a “poly”.
- coords: The coordinates of the shape.
- href: The 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 the 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: The <area> tag in html.
html
<!DOCTYPE html><html><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> |
Output:
- Before click on specific clickable area
- After click on the specific clickable area
Note: This <area> tag is always nested in <map> tag.
Supported Browsers:
- Google Chrome
- Edge 12 and above
- Internet Explorer
- Mozilla Firefox 1 and above
- Opera
- Safari
Please Login to comment...