/    Sign up×
Reference /Pin to ProfileBookmark

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

to submit a demo.
HTML
×

Success!

Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 7.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @Nanditha,
tipped: article
amount: 1000 SATS,
)...