The<area>HTML element defines an area inside an image map that has predefined clickable areas. Animage map allows geometric areas on an image to be associated withhypertext links.

This element is used only within a<map> element.

Try it

<map name="infographic">  <area    shape="poly"    coords="129,0,260,95,129,138"    href="https://developer.mozilla.org/docs/Web/HTTP"    alt="HTTP" />  <area    shape="poly"    coords="260,96,209,249,130,138"    href="https://developer.mozilla.org/docs/Web/HTML"    alt="HTML" />  <area    shape="poly"    coords="209,249,49,249,130,139"    href="https://developer.mozilla.org/docs/Web/JavaScript"    alt="JavaScript" />  <area    shape="poly"    coords="48,249,0,96,129,138"    href="https://developer.mozilla.org/docs/Web/API"    alt="Web APIs" />  <area    shape="poly"    coords="0,95,128,0,128,137"    href="https://developer.mozilla.org/docs/Web/CSS"    alt="CSS" /></map><img  usemap="#infographic"  src="/shared-assets/images/examples/mdn-info.png"  alt="MDN infographic" />

img {  display: block;  margin: 0 auto;  width: 260px;  height: 260px;}

Attributes

This element's attributes include theglobal attributes.

alt

A text string alternative to display on browsers that do not display images.The text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text.This attribute is required only if thehref attribute is used.

coords

Thecoords attribute details the coordinates of theshape attribute in size, shape, and placement of an<area>.This attribute must not be used ifshape is set todefault.

• rect: the value isx1,y1,x2,y2.The value specifies the coordinates of the top-left and bottom-right corner of the rectangle.For example, in<area shape="rect" coords="0,0,253,27" href="#" alt="Mozilla"> the coordinates are0,0 and253,27, indicating the top-left and bottom-right corners of the rectangle, respectively.
• circle: the value isx,y,radius. Value specifies the coordinates of the circle center and the radius.For example:<area shape="circle" coords="130,136,60" href="#" alt="MDN">
• poly: the value isx1,y1,x2,y2,..,xn,yn. Value specifies the coordinates of the edges of the polygon.If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon

The values are numbers of CSS pixels. Ourshape generator can help you generate thecoords syntax by selecting points on an image you upload.

download

This attribute, if present, indicates that the linked resource is intended to be downloaded rather than displayed in the browser.See<a> for a full description of thedownload attribute.

href

The hyperlink target for the area.Its value is a valid URL.This attribute may be omitted; if so, the<area> element does not represent a hyperlink.

ping

Contains a space-separated list of URLs to which, when the hyperlink is followed,POST requests with the bodyPING will be sent by the browser (in the background).Typically used for tracking.

referrerpolicy

A string indicating which referrer to use when fetching the resource:

• no-referrer: TheReferer header will not be sent.
• no-referrer-when-downgrade: TheReferer header will not be sent toorigins withoutTLS (HTTPS).
• origin: The sent referrer will be limited to the origin of the referring page: itsscheme,host, andport.
• origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
• same-origin: A referrer will be sent forsame origin, but cross-origin requests will contain no referrer information.
• strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
• strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
• unsafe-url: The referrer will include the originand the path (but not thefragment,password, orusername).This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

rel

For anchors containing thehref attribute, this attribute specifies the relationship of the target object to the link object.The value is a space-separated list of link types.The values and their semantics will be registered by some authority that might have meaning to the document author.The default relationship, if no other is given, is void. Use this attribute only if thehref attribute is present.

shape

The shape of the associated hot spot. The specifications for HTML defines the valuesrect, which defines a rectangular region;circle, which defines a circular region;poly, which defines a polygon; anddefault, which indicates the entire region beyond any defined shapes.

target

A keyword or author-defined name of thebrowsing context to display the linked resource.The following keywords have special meanings:

• _self (default): Show the resource in the current browsing context.
• _blank: Show the resource in a new, unnamed browsing context.
• _parent: Show the resource in the parent browsing context of the current one, if the current page is inside a frame.If there is no parent, acts the same as_self.
• _top: Show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent).If there is no parent, acts the same as_self.

Use this attribute only if thehref attribute is present.

Note:Settingtarget="_blank" on<area> elements implicitly provides the samerel behavior as settingrel="noopener" which does not setwindow.opener. Seebrowser compatibility for support status.

Examples

Image with clickable areas

<map name="primary">  <area    shape="circle"    coords="75,75,75"    href="left.html"    alt="Click to go Left" />  <area    shape="circle"    coords="275,75,75"    href="right.html"    alt="Click to go Right" /></map><img  usemap="#primary"  src="https://dummyimage.com/350x150"  alt="350 x 150 pic" />

Technical summary

Specifications

Browser compatibility