HTML <area> Tag
We’re talking about Tag Area. I believe this will fulfill the requirements for learning.
Syntax
<area shape="" coords="" href="">
The following image map has clickable areas:
Example
In the Tag Area, here is our second image map that includes clickable areas:
Example
Here is an example of the tag <area> with the svg:
Example:
Uses and Definition
The Tag Area <area> represents an area within an image map (an image map consists of clickable areas).
Generally, <area> elements are nested within the <map> tag.
IMPORTANT: In specific images, the use map attribute in <img> is linked with the element’s name attribute of the map element, establishing a connection between the image and the map.
Advantages of HTML <area> tag
The HTML <area> tag is used to define a clickable area within an image map. Here are some advantages of using this tag:
- By using the <area> tag, you can accurately map out specific areas within an image, making it easier for users to click on the exact spot they want.
- With image maps and the <area> tag, you can make it easier for users to navigate through your website, as they can click on specific areas of an image to access different pages or information.
- Using image maps and the <area> tag can make your website more accessible to visually impaired users who rely on screen readers. The tags provide a way to add alternative text to the images, which can be read aloud to users.
- By using image maps and the <area> tag, you can reduce the overall load time of your website by combining multiple images into one. This can improve the speed of your website and make it more efficient.
In a nutshell, with the <area> tag, you can create more complex and creative designs, as you can use images as links and map out multiple clickable areas within them.
Global Attributes
In HTML, the <area> tag accepts Global Attributes as well.
Event Attributes
In HTML, the <area> tag accepts Event Attributes as well.
Attributes
| Attribute | Value | Overview |
|---|---|---|
| hreflang | language_code | This parameter defines the destination URL’s language. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url | Indicate which referrer details to include in the link. |
| alt | text | Provides an alternative text for the area. Must be present if the href attribute is included. |
| shape | default rect circle poly | Describe the area’s shape |
| coords | coordinates | A description of the area’s coordinates. |
| download | filename | This indicates that the user who clicks on the hyperlink will download the target. |
| href | URL | This parameter defines the target hyperlink for the area. |
| media | media query | Provides details about which media/device the URL is optimized for. |
| target | _blank _parent _self _top framename | Decide on the opening location for the target URL |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | Describes the relationship between the present document and the target URL |
| type | media_type | The type of media associated with the target URL is determined |
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <area> | Yes | Yes | Yes | Yes | Yes |
CSS Settings By Default
The majority of browsers will show the <area> element with the following values by default in Tag Area:
display: none;
}
