HTML <area>
query_builder | Christopher PisaniThe <area> tag is a child element of <map> and is used to point to a region on an image to make it clickable for a hyperlink.
Tag area example :
<!--
Clicking on square takes you to google website
Clicking on circle takes you to yahoo website
-->
<img src="https://www.jazzo.co.uk/media/shapes.jpg" usemap="#shapes-map">
<map name="shapes-map">
<area shape="rect" title="Square" coords="18,20,220,225" href="https://www.google.com" target="__blank" />
<area shape="circle" title="Circle" coords="368,125,100" href="https://www.yahoo.com" target="__blank" />
</map>
Available Attributes
| Attribute | Values | Functionality |
|---|---|---|
| alt | text | Shows a title, when hovered over the hyperlink area |
| coords | x,y,xy (rect) x,y,radius (circle) x,y,z,y (polygon) |
The coordinates of the area to be used as a hyperlink |
| shape | rect circle poly |
Defines how the area will be selected |
| href | url | Specifies the link for the area |
| target | _blank _parent _self _top |
Whether to open on the self window or a new window |
| ping | url | Will send an HTTP POST to a specified URL, generally used for tracking or count clicks on a particular link |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
The relationship between the current document and the document you are about to open |
| media | format | Gives info about media type the document will compose of |
| hreflang | language code | The language of the linked document |
| type | format | The media of the linked document |