The <area> tag is used in combination with the <map> tag to define clickable areas within an interactive image, often called an "image map".
Each <area> tag corresponds to a specific region of the image, allowing these areas to become clickable links to URLs or specific actions.
It is particularly useful for creating interactive visual interfaces, such as maps, diagrams, or images with multiple points of interest.
Remember LeBonCoin's map? It was a clickable area that used the <area> tags!
Structure and Syntax of the <area> Tag
Syntax
The <area> tag is used, as mentioned earlier, in conjunction with a <map> tag.
It is always structured as follows:
<area shape="[SHAPE]" coords="[COORDINATES]" href="[URL]" alt="[DESCRIPTION]" />
Usage Example
Here’s a "simple 🙄" example with a rectangle, a circle, and a polygon.
<img src="image-map.jpg" usemap="#example-map" alt="Image map example" />
<map name="example-map">
<area shape="rect" coords="34,44,270,350" href="https://example.com/section1" alt="Section 1" />
<area shape="circle" coords="450,150,75" href="https://example.com/section2" alt="Section 2" />
<area shape="poly" coords="200,10,250,190,160,210" href="https://example.com/section3" alt="Section 3" />
</map>And here’s a more engaging demonstration:
Manually creating these "areas" can be tricky; they are often generated using specialized software such as Fla-shop.
Attributes
| Attribute | Description | Possible Values |
|---|---|---|
shape | Specifies the shape of the clickable area. | rect, circle, poly, or default. |
coords | Defines the coordinates of the area based on the specified shape. | A list of numeric values separated by commas. |
href | Hyperlink to redirect to when the area is clicked. | A valid URL. |
alt | Provides a textual description of the area for accessibility. | Descriptive text. |
target | Specifies where to open the link (_self, _blank, _parent, or _top). | _self (default), _blank, _parent, or _top. |
download | Allows downloading the linked file instead of redirecting to the URL. | Optional value: filename. |
Browser Compatibility
The <area> tag is widely supported by all modern and older browsers. However:
- Remember to use it with the
<map>tag to ensure functionality; - Include an
altattribute for better accessibility, as these areas are not always visible to users or screen readers. 😉