HTML <area> Tag
Definition and Usage
The <area> tag is used to specify a clickable region within an image map, which is essentially an image with interactive sections that can be clicked.
<area> elements are placed within a
<map> tag.
Note: The usemap attribute in the <img> tag works with the "name" attribute in the <map> tag. It links the image and the map together.
Attributes
| Attribute | Value | Description |
|---|---|---|
| alt | text | If there's a link given (href attribute), you need to provide a different text to describe it. This is necessary. |
| coords | coordinates | Provides the exact location points of the area. |
| download | filename | This means that when someone clicks on the link, the clicked item will be downloaded. |
| href | URL | Shows the hyperlink target |
| hreflang | language_code | Defines the language of the target URL |
| media | media query | Describes the preferred platform or device for which the target URL is optimized. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Describes what information about the source should be included when sharing the link. |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Describes how the current document is connected to the target web link. |
| shape |
default rect circle poly |
Defines the shape of the area |
| target | _blank _parent _self _top framename |
Shows where to open the target URL |
| type | media_type | Shows the media type of the target URL |
Global Attributes
The <area> tag in HTML also works with the Global Attributes.
Event Attributes
The <area>tag in HTML can also be used with Event Attributes.
More Examples
Default CSS Settings
The <area> element in most web browsers will be shown with the default settings:
HTML
CSS
Javascript
Jquery
PHP
MySQL