HTML <area> Element

The <area> element defines a clickable region within an image map. Each area can have its own shape, coordinates, alternative text, and hyperlink destination.

Syntax

<area shape="rect" coords="0,0,200,100" href="URL" alt="Description">

The <area> element is a void element and does not use a closing tag.

Attributes

The <area> element supports the global HTML attributes and the following element-specific attributes:

Attribute	Description
`alt`	Provides alternative text describing the hyperlink represented by the area.
`coords`	Specifies the coordinates that define the position and size of the clickable area.
`shape`	Specifies the shape of the area as `rect`, `circle`, `poly`, or `default`.
`href`	Specifies the URL of the hyperlink destination.
`target`	Specifies where the linked resource will be opened.
`download`	Indicates that the linked resource is intended to be downloaded.
`ping`	Specifies one or more URLs to notify when the hyperlink is followed.
`rel`	Describes the relationship between the current document and the linked resource.
`referrerpolicy`	Controls the referrer information sent when the linked resource is requested.
`hreflang`	Provides the language of the linked resource.
`type`	Provides a hint about the media type of the linked resource.

Example

The following example creates two clickable rectangular regions within an image:

<img src="images/navigation.jpg" alt="Website navigation" usemap="#navigation-map">

<map name="navigation-map">
  <area shape="rect" coords="0,0,200,100" href="about.html" alt="About Us">
  <area shape="rect" coords="200,0,400,100" href="contact.html" alt="Contact Us">
</map>

The usemap attribute connects the image to the <map> element, while each <area> defines a separate clickable region.

Try It Yourself

Change the shape, coords, or link destinations in the editor to see how the clickable areas of the image map change.

Play in Editor

Usage Notes

The <area> element is used only within a <map> element. The shape and coords attributes work together to determine which part of the image belongs to each area.

When an <area> has an href attribute, it represents a hyperlink and the alt attribute must be included. If href is omitted, the area is not selectable and the alt attribute must also be omitted.

The target, download, ping, rel, referrerpolicy, hreflang, and type attributes are used only when the href attribute is present.

The coordinates required by coords depend on the selected shape. A rectangle uses four coordinates, a circle uses three, and a polygon uses a series of coordinate pairs. The default shape represents the entire image and does not use coords.

Accessibility

Every clickable <area> should provide meaningful alt text that describes the purpose or destination of the hyperlink. This allows people who cannot see the image map to understand and use its links.

Do not rely on the position, shape, or appearance of an image-map region alone to communicate its purpose. The alternative text should provide enough information for the link to make sense without seeing the image.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

For detailed browser compatibility information, see Can I Use: HTML <area> Element .

Some individual attributes and hyperlink features may have different levels of browser support.

<map> - Defines an image map containing one or more <area> elements.

<img> - Displays the image associated with an image map through its usemap attribute.

<a> - Creates a hyperlink around visible HTML content.

Specifications

HTML Living Standard: The <area> Element

HTML <area> Element