The <area> tag is used to define clickable regions within an image map. Image maps allow you to create multiple clickable areas on a single image, each linking to different URLs or performing different actions.

How Image Maps Work

Image maps consist of three main parts: the <img> element (the image), the <map> element (the map container), and one or more <area> elements (the clickable regions). The image references the map using the usemap attribute.

Shape Types

The shape attribute defines the type of clickable region:

• rect: Rectangle defined by x1,y1,x2,y2 (top-left and bottom-right corners)
• circle: Circle defined by x,y,r (center coordinates and radius)
• poly: Polygon defined by a series of x,y coordinate pairs
• default: The entire image area

Accessibility

Always include the alt attribute on each <area> tag. This provides alternative text for screen readers and helps users understand what each clickable region does. Without proper alt text, image maps can be inaccessible to users with disabilities.

Modern Considerations

While image maps are still valid HTML, they can be challenging to make responsive. For modern, flexible designs, consider using SVG with clickable paths, or layering transparent <a> elements over images with CSS positioning.