<area>

The HTML <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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. In HTML4, this attribute is required, but may be the empty string (""). In HTML5, this attribute is required only if the href attribute is used.

coords

A set of values specifying the coordinates of the hot-spot region. The number and meaning of the values depend upon the value specified for the shape attribute.

• rect or rectangle: the coords value is two x,y pairs: left, top, right, bottom.
• circle: the value is x,y,r where x,y is a pair specifying the center of the circle and r is a value for the radius.
• poly or polygon: the value is a set of x,y pairs for each point in the polygon: x1,y1,x2,y2,x3,y3, and so on.

In HTML4, the values are numbers of pixels or percentages, if a percent sign (%) is appended; in HTML5, the values are numbers of CSS pixels.

download HTML5

This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. See <a> for a full description of the download attribute.

href

The hyperlink target for the area. Its value is a valid URL. In HTML4, either this attribute or the nohref attribute must be present in the element. In HTML5, this attribute may be omitted; if so, the area element does not represent a hyperlink.

hreflang HTML5

Indicates the language of the linked resource. Allowed values are determined by BCP47. Use this attribute only if the href attribute is present.

name HTML 4 only, Obsolete since Gecko 5.0

Define a names for the clickable area so that it can be scripted by older browsers.

nohref HTML 4 only, Obsolete since Gecko 5.0

Indicates that no hyperlink exists for the associated area. Either this attribute or the href attribute must be present in the element.

Usage note: This attribute is obsolete in HTML5, instead omitting the href attribute is sufficient.

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:

• "no-referrer" meaning that the Referer: header will not be sent.
• "no-referrer-when-downgrade" meaning that no Referer: header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
• "origin" meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
• "origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path. 
• "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.

rel HTML5

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 values. 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 5 and HTML 4 define 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. Many browsers, notably Internet Explorer 4 and higher, support circ, polygon, and rectangle as valid values for shape; these values are .

tabindex HTML 4 only, Obsolete since Gecko 5.0

A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.

target

This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:

• _self: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
• _blank: Load the response into a new unnamed HTML4 window or HTML5 browsing context.
• _parent: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
• _top: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

Use this attribute only if the href attribute is present.

type Obsolete since Gecko 5.1

Don’t use this attribute. Browsers ignore it. (The W3C 5.3 fork of the HTML specification defines it as valid, but the canonical HTML specification doesn’t, and it has no effect in any user agents.)

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="http://placehold.it/350x150" alt="350 x 150 pic">

Result

Notes

Under HTML5, the closing tag </area> is forbidden.

Specifications

Browser compatibility