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 > |
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: