The HTMLAreaElement interface provides special properties and methods (beyond those of the regular object HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of <area> elements.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/HTMLAreaElement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLAreaElement</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Properties
Inherits properties from its parent, HTMLElement, and implements those from HTMLHyperlinkElementUtils.
Element.accessKey- Is a
DOMStringcontaining a single character that switches input focus to the control. HTMLAreaElement.alt- Is a
DOMStringthat reflects thealtHTML attribute, containing alternative text for the element. HTMLAreaElement.coords- Is a
DOMStringthat reflects thecoordsHTML attribute, containing coordinates to define the hot-spot region. HTMLAreaElement.download- Is a
DOMStringindicating that the linked resource is intended to be downloaded rather than displayed in the browser. The value represent the proposed name of the file. If the name is not a valid filename of the underlying OS, browser will adapt it. HTMLHyperlinkElementUtils.hash- Is a
USVStringcontaining the fragment identifier (including the leading hash mark (#)), if any, in the referenced URL. HTMLHyperlinkElementUtils.host- Is a
USVStringcontaining the hostname and port (if it's not the default port) in the referenced URL. HTMLHyperlinkElementUtils.hostname- Is a
USVStringcontaining the hostname in the referenced URL. HTMLHyperlinkElementUtils.href- Is a
USVStringcontaining that reflects thehrefHTML attribute, containing a valid URL of a linked resource. HTMLAreaElement.hreflang- Is a
DOMStringcontaining that reflects thehreflangHTML attribute, indicating the language of the linked resource. HTMLAreaElement.media- Is a
DOMStringcontaining that reflects themediaHTML attribute, indicating target media of the linked resource. HTMLAreaElement.noHref- Is a
Booleanflag indicating if the area is inactive (true) or active (false). HTMLHyperlinkElementUtils.password- Is a
USVStringcontaining the password specified before the domain name. HTMLHyperlinkElementUtils.originRead only- Returns a
USVStringcontaining the origin of the URL, that is its scheme, its domain and its port. HTMLHyperlinkElementUtils.pathname- Is a
USVStringcontaining the path name component, if any, of the referenced URL. HTMLHyperlinkElementUtils.port- Is a
USVStringcontaining the port component, if any, of the referenced URL. HTMLHyperlinkElementUtils.protocol- Is a
USVStringcontaining the protocol component (including trailing colon':'), of the referenced URL. HTMLAreaElement.referrerPolicy- Is a
DOMStringthat reflects thereferrerpolicyHTML attribute indicating which referrer to use when fetching the linked resource. HTMLAreaElement.rel- Is a
DOMStringthat reflects therelHTML attribute, indicating relationships of the current document to the linked resource. HTMLAreaElement.relListRead only- Returns a
DOMTokenListthat reflects therelHTML attribute, indicating relationships of the current document to the linked resource, as a list of tokens. HTMLHyperlinkElementUtils.search- Is a
USVStringcontaining the search element (including leading question mark'?'), if any, of the referenced URL. HTMLAreaElement.shape- Is a
DOMStringthat reflects theshapeHTML attribute, indicating the shape of the hot-spot, limited to known values. HTMLElement.tabIndex- Is a
longcontaining the element's position in the tabbing order. HTMLAreaElement.target- Is a
DOMStringthat reflects thetargetHTML attribute, indicating the browsing context in which to open the linked resource. HTMLAreaElement.type- Is a
DOMStringthat reflects thetypeHTML attribute, indicating the MIME type of the linked resource. HTMLHyperlinkElementUtils.username- Is a
USVStringcontaining the username specified before the domain name.
Methods
Inherits methods from its parent, HTMLElement, and implements those from HTMLHyperlinkElementUtils.
HTMLHyperlinkElementUtils.toString()- Returns a
USVStringcontaining the whole URL of the script executed in theWorker. It is a synonym forHTMLHyperlinkElementUtils.href.
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of 'HTMLAreaElement' in that specification. |
Living Standard | The following property has been added: download.Technically, the URL-related properties, media, host, hostname, pathname, port, protocol, search, and hash, have been moving to the HTMLHyperlinkElementUtils mixin, and HTMLAreaElement implements this mixin. |
| HTML5 The definition of 'HTMLAreaElement' in that specification. |
Recommendation | Technically, the properties tabindex and accesskey are now defined on HTMLElement.The following property is now obsolete: nohref.The following properties have been added: rel, relList, media, hreflang, type, host, hostname, pathname, port, protocol, search, and hash. |
| Document Object Model (DOM) Level 2 HTML Specification The definition of 'HTMLAreaElement' in that specification. |
Obsolete | No change from Document Object Model (DOM) Level 1 Specification. |
| Document Object Model (DOM) Level 1 Specification The definition of 'HTMLAreaElement' in that specification. |
Obsolete | Initial definition |
Browser compatibility
The compatibility table on 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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
HTMLAreaElement | 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 Yes | 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 Yes | 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 Yes | 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 Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
download | Chrome Full support 54 | Edge Full support 13 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 54 | Chrome Android Full support 54 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 6.0 |
hreflang | 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 Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
media | 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 Yes | 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 Yes | 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 54 | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 54 | Chrome Android Full support 54 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 6.0 |
relList | Chrome Full support 65 | Edge Full support 18 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 65 | Chrome Android Full support 65 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 9.0 |
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 Yes | 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 Yes | 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 Yes | 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 Yes | 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
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
See also
- HTML element implementing this interface:
<area>
