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.
Content categories | Flow content, phrasing content. |
---|---|
Permitted content | None, it is an empty element. |
Tag omission | Must have a start tag and must not have an end tag. |
Permitted parents | Any element that accepts phrasing content. The <area> element must have an ancestor <map> , but it need not be a direct parent. |
Implicit ARIA role | link when href attribute is present, otherwise no corresponding role |
Permitted ARIA roles | No role permitted |
DOM interface | HTMLAreaElement |
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
- 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 value is two x,y pairs: left, top, right, bottom.circle
: the value isx,y,r
wherex,y
is a pair specifying the center of the circle andr
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.
download
- 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 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. hreflang
- Indicates the language of the linked resource. Allowed values are determined by BCP47. Use this attribute only if the
href
attribute is present. 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"
meaning that theReferer:
header will not be sent.- "
no-referrer-when-downgrade
" meaning that noReferer:
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
- 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 thehref
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; anddefault
, which indicates the entire region beyond any defined shapes. - Many browsers, notably Internet Explorer 4 and higher, support
circ
,polygon
, andrectangle
as valid values forshape
, but these values are non-standard. target
- A keyword or author-defined name of the browsing 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 the
href
attribute is present.Note: In newer browser versions (e.g. Firefox 79+) setting
target="_blank"
on<area>
elements implicitly provides the samerel
behavior as settingrel="noopener"
.
Deprecated attributes
name
- Define a names for the clickable area so that it can be scripted by older browsers.
nohref
- Indicates that no hyperlink exists for the associated area.
Note: Since HTML5, omitting the
href
attribute is sufficient. tabindex
- A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.
type
- No effect. 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="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic">
Result
Specifications
Specification | Status | Comment |
---|---|---|
Referrer Policy The definition of 'referrerpolicy attribute' in that specification. |
Candidate Recommendation | Added the referrerpolicy attribute. |
HTML Living Standard The definition of '<area>' in that specification. |
Living Standard | |
HTML5 The definition of '<area>' in that specification. |
Recommendation | |
HTML 4.01 Specification The definition of '<area>' in that specification. |
Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
area | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
accesskey | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
alt | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
coords | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
download | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
href | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
hreflang | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
target="_blank" implies rel="noopener" behavior | Chrome No support No | Edge No support No | Firefox Full support 79 | IE No support No | Opera No support No | Safari Full support 12.1 | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android No support No |
media | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
name | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
nohref | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
referrerpolicy | Chrome Full support 51 | Edge Full support 79 | Firefox Full support 50 | IE No support No | Opera Full support 38 | Safari Full support 11.1 | WebView Android Full support 51 | Chrome Android Full support 51 | Firefox Android Full support 50 | Opera Android Full support 41 | Safari iOS No support No | Samsung Internet Android Full support 7.2 |
rel | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
shape | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
tabindex | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
target | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
type | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.