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.
Attributes of <area> tag:
|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.
- 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:
- HTML | DOM Area Object
- HTML | <area> alt Attribute
- HTML | <area> rel Attribute
- HTML | DOM Area alt Property
- HTML | <area> href Attribute
- HTML | DOM Area host Property
- HTML | DOM Area href Property
- HTML | DOM Area target Property
- HTML | DOM Area password Property
- HTML | DOM Area hostname Property
- HTML | DOM Area origin Property
- HTML | <area> download Attribute
- HTML | DOM Area coords Property
- HTML | <area> shape Attribute
- HTML | DOM Area username Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.