🚀 Your All-in-One Toolbox — 90+ Free Online Tools
Logo

HTML area Tag

The HTML <area> tag defines an area inside an image map. The <area> element is always nested inside a <map> tag. An image map allows you to link different parts of an image to different destinations. This can be useful for navigational menus, geographical maps or interactive diagrams where specific regions of an image should be clickable

Basic Syntax

The <area> tag is an empty element (it has no closing tag) and is used within a <map> element, which is then associated with an <img> tag using the usemap attribute.
html
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercury.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Key Attributes of <area>

- shape: Defines the shape of the clickable area. Common values are:

- rect: Rectangular area (defined by coords="x1,y1,x2,y2").

- circle: Circular area (defined by coords="x,y,radius").

- poly: Polygonal area (defined by coords="x1,y1,x2,y2,...,xn,yn").

- default: Specifies the entire region.

- coords: Specifies the coordinates of the clickable area. The format depends on the value of the shape attribute.

- For rect: x1,y1,x2,y2 (top-left x, top-left y, bottom-right x, bottom-right y).

- For circle: x,y,radius (center x, center y, radius).

- For poly: x1,y1,x2,y2,...,xn,yn (coordinates of each vertex).

- href: Specifies the URL that the area links to. If this attribute is not present, the area is not a hyperlink.

- alt: Specifies alternative text for the area. This is crucial for accessibility, providing information to users who cannot see the image or for screen readers.

- target: Specifies where to open the linked document (e.g., _blank, _self).

- download: Prompts the user to download the linked URL.

How it Works with <map> and <img> tags

1. The <img> tag displays the image. Its usemap attribute value (prefixed with a #) refers to the name attribute of a <map> element.

2. The <map> element contains one or more <area> elements.

3. Each <area> element defines a specific clickable region on the image.

Considerations

- Accessibility: Always provide meaningful alt text for each <area>. Image maps can be challenging for users with disabilities if not implemented carefully.

- Responsiveness: Traditional image maps with pixel-based coordinates are not inherently responsive. For responsive designs, you might need JavaScript libraries or SVG-based solutions for clickable image regions.

- Complexity: For very complex shapes or a large number of clickable areas, SVG might be a more flexible and powerful alternative.

Conclusion

The <area> tag, in conjunction with <map>, provides a way to create client-side image maps, making different parts of an image interactive. While useful for certain scenarios, consider the accessibility and responsiveness implications for modern web design.
Back