area

The HTML <area> element defines a clickable region inside an image map. This page explains how area, map, and img work together.

What you will learn

The roles of area, map, and img
How to define which part of an image becomes a link
Why the link purpose should be described with alt

What is an image map?

An image map lets different regions of one image link to different destinations. The map element groups the regions, while each area describes one region. The image connects to the map with usemap.

Basic example

<img src="campus.png" alt="Campus map" usemap="#campus-map">
<map name="campus-map">
  <area shape="rect" coords="0,0,120,80"
        href="library.html" alt="Library">
  <area shape="circle" coords="220,60,35"
        href="cafe.html" alt="Cafe">
</map>

Main attributes

shape: Chooses the region shape, such as rect, circle, or poly.
coords: Lists coordinates for the chosen shape. The coordinate system starts at the image’s top-left corner.
href: Sets the destination of the region.
alt: Names the destination or purpose for people who cannot see the image.

Accessibility and practical advice

Write an alt that tells users where the region leads, not merely its shape or color. The main img still needs useful alternative text, and an image map should not be the only way to navigate important content.

Common mistakes

Forgetting to match img usemap="#name" with map name="name".
Using coordinates for the wrong image size.
Leaving alt empty on a linked region.
Using an image map when ordinary text links would be clearer.