<area>

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

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 alt attribute for better accessibility, as these areas are not always visible to users or screen readers. 😉