: The Image Map Area element - HTML | MDN (original) (raw)

Baseline

Widely available *

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

This element is used only within a 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 the global 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 the href attribute is used.

coords

The coords attribute details the coordinates of the shape attribute in size, shape, and placement of an <area>. This attribute must not be used if shape is set to default.

The values are numbers of CSS pixels.

download

This attribute, if present, indicates that the linked resource is intended to be downloaded rather than displayed in the browser. See for a full description of the download 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 body PING 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:

rel

For anchors containing the href 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 the href attribute is present.

shape

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

target

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

Use this attribute only if the href attribute is present.

**Note:**Setting target="_blank" on <area> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener. See browser compatibility for support status.

Examples

<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" />

Result

Technical summary

Content categories Flow content,phrasing content.
Permitted content None; it is a void element.
Tag omission Must have a start tag and must not have an end tag.
Permitted parents Any element that accepts phrasing content. The element must have an ancestor , but it need not be a direct parent.
Implicit ARIA role link when href attribute is present, otherwisegeneric
Permitted ARIA roles No role permitted
DOM interface HTMLAreaElement

Specifications

Specification
HTML # the-area-element

Browser compatibility