Last Updated on July 3, 2023 by Roshan Parihar
HTML area tag is used to add clickable area to an image map. After specifying the link to each area of image, you can hover and click the links to open them.
Test it Live
|
1 2 3 4 5 6 |
<img src="nature.jpg" alt="html area tag nature image" usemap="#myareamap"/> <map name="myareamap"> <area shape="rect" coords="0,0,40,100" alt="paragraph" href="html-paragraph-tag"> <area shape="circle" coords="80,10,100,5" alt="image" href="html-image-tag"> <area shape="circle" coords="124,58, 150, 67" alt="figure" href="html-figure-tag"> </map> |
Output
The HTML <area> tag should be always placed inside the <map> tag in HTML document.
The syntax of the <area> tag in HTML 5 is given below:
Syntax
<area shape=”” coords=”” alt=”” href=””>
The above syntax shows the attributes of this tag. It has only start and no end tag in HTML document.
Specifications of HTML <address>:
| Start Tag | <area> |
|---|---|
| End Tag | N/A |
| Content Type | N/A |
Attributes of HTML area tag
HTML area Tag Specific Attributes
| Sr. No. | atribute Name | Description | |
|---|---|---|---|
| 1 | alt | alt tag is used to display alternate text for the area. | |
| 2 | coords | coords id used to specify the co-ordinates of the area to describe the href link. This becomes to clickable area to show internal or external pages.
|
|
| 3 | download | Used to describe the file to dowload on click. The value of this attribute is the name of a file with its location. | |
| 4 | href | href is used to specify the location of the source or location to display on click. | |
| 5 | hreflang | hreflang is used to specify the language of the source. | |
| 6 | media | media is used to specify the media or target device the target url is optimized for. | |
| 7 | rel | rel is used to specify the relationship between the current location and the target location. The values for rel attribute are alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | |
| 8 | shape | shape is used to specify the shape of the image map. The values for this attribute are rect, rectangle, circ, circle, poly, polygon |
Global Attributes
The <address> tag supports the global attributes in HTML 5.
Events Attributes
The <address> tag supports the event attributes in HTML 5.
Supported Browsers
- Google Chrome
- Microsoft Edge
- Internet Explorer
- Safari
- Firefox
- Opera