<area>

The area tag, or Image Map Area element, is always nested inside a map element and defines a specific area with predefined clickable areas within an image map.

Syntax

Example:

<map name="examplemap">
  <area shape="circle" coords="75,75,75" href="example-one.html" alt="Click to go somewhere" />
  <area shape="circle" coords="275,75,75" href="example-two.html" alt="Click to go somewhere else" />
</map>
<img usemap="#examplemap" src="https://via.placeholder.com/600x600" alt="A 600 x 600 image map" />

Attributes

alt
Specifies alternate text. Required when href is also being used.

coords
Specifies the coordinates/location of the area within the image map.

download
Designates that the URL targeted will be downloaded when clicked.

href
Provides the address/URL to which the element is linked.

hreflang
Identifies the language that the linked URL is in.

media
Identifies the media or device that the linked URL is optimized for.

referrerpolicy
Depending on the specified value, determines how much of the referrer to send.

rel
Depending on the specified value, specifies the relationship between the linked item and the current URL.

shape
Defines the shape of the area.

target
Determines where the linked URL is opened (current window, new window, etc.)

type
Provides the linked URL’s format in Mime-type.

Browser Compatibilty

Demos

Have a code example of <area>? Submit a codepen.io demo and we'll showcase it here ↴