<area>

  • Revision slug: HTML/Element/area
  • Revision title: area
  • Revision id: 81600
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment 1 words added, 7 words removed

Revision Content

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

Usage context

Permitted content Empty; this is a void element.
Tag omission Must have a start tag and must not have an end tag.
Permitted parent elements Any element that accepts phrasing content. The <area> element must have an ancestor {{ HTMLElement("map") }}, but it need not be a direct parent.
Normative documents HTML 5, section 4.8.13; HTML 4.01, section 13.6.1

Attributes

Like all other HTML elements, this element supports the global attributes.

{{ htmlattrdef("accesskey") }} {{ HTMLVersionInline("4") }} only, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}
Specifies a keyboard navigation accelerator for the element. Pressing ALT or a similar key in association with the specified character selects the form control correlated with that key sequence. Page designers are forewarned to avoid key sequences already bound to browsers. This attribute is global since HTML5.
{{ htmlattrdef("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.
{{ htmlattrdef("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. For a rect or rectangle shape, the coords value is two x,y pairs: left, top, right, and bottom. For a circle shape, 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. For a poly or polygon< shape, 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.
{{ htmlattrdef("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.
{{ htmlattrdef("hreflang") }} {{ HTMLVersionInline("5") }}
Indicates the language of the linked resource. Allowed values are determined by BCP47. Use this attribute only if the href attribute is present.
{{ htmlattrdef("name") }} {{ HTMLVersionInline("4") }} only, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}
Define a names for the clickable area so that it can be scripted by older browsers.
{{ htmlattrdef("media") }} {{ HTMLVersionInline("5") }}
A hint of the media for which the linked resource was designed, for example print and screen. If omitted, it defaults to all. Use this attribute only if the href attribute is present.
{{ htmlattrdef("nohref") }} {{ HTMLVersionInline("4") }} only, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}
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.

{{ htmlattrdef("rel") }} {{ HTMLVersionInline("5") }}
For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of relationship 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.
{{ htmlattrdef("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 {{ Non-standard_inline() }}.
{{ htmlattrdef("tabindex") }} {{ HTMLVersionInline("4") }} only, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}
A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.
{{ htmlattrdef("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 HMTL4 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. 
{{ htmlattrdef("type") }}
This attribute specifies the media type in the form of a MIME type for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Use this attribute only if the href attribute is present.

Example

<map name="primary">
  <area shape="circle" coords="200,250,25" href="another.htm" /> 
  <area shape="default" nohref />
</map>

DOM Interface

This element implements the HTMLAreaElement interface.

Notes

Under the HTML 3.2, 4.0, and 5 specifications, the closing tag </area> is forbidden.

The XHTML 1.0 specification requires a trailing slash: <area />.

The id, class, and style attributes have the same meaning as the core attributes defined in the HTML 4 specification, but only Netscape and Microsoft define them.

{{ gecko_callout_heading("5.0") }}

Prior to Gecko 5.0 {{ geckoRelease("5.0") }}, empty areas were skipped over in favor of non-empty ones when in quirks mode; this is no longer the case. See {{ bug("587469") }}.

Netscape 1–level browsers do not understand the target attribute as it relates to frames.

HTML 3.2 defines only alt, coords, href, nohref, and shape.

{{ HTML:Element_Navigation() }}

{{ languages( { "pl": "pl/HTML/Element/area" } ) }}

Revision Source

<p>The HTML <em>Area</em> element (<code>&lt;area&gt;</code>) defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a {{ HTMLElement("map") }} element.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <td>Permitted content</td> <td>Empty; this is a void element.</td> </tr> <tr> <td>Tag omission</td> <td>Must have a start tag and must not have an end tag.</td> </tr> <tr> <td>Permitted parent elements</td> <td>Any element that accepts <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a>. The <code>&lt;area&gt;</code> element must have an ancestor {{ HTMLElement("map") }}, but it need not be a direct parent.</td> </tr> <tr> <td>Normative documents</td> <td><a class=" external" href="http://www.w3.org/TR/html5/the-map-element.html#the-area-element" title="http://www.w3.org/TR/html5/the-map-element.html#the-area-element">HTML 5, section 4.8.13</a>; <a class=" external" href="http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1" title="http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1">HTML 4.01, section 13.6.1</a></td> </tr> </tbody>
</table>
<h2>Attributes</h2>
<p>Like all other HTML elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<dl> <dt>{{ htmlattrdef("accesskey") }} {{ HTMLVersionInline("4") }} only, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> <dd>Specifies a keyboard navigation accelerator for the element. Pressing ALT or a similar key in association with the specified character selects the form control correlated with that key sequence. Page designers are forewarned to avoid key sequences already bound to browsers. This attribute is global since HTML5.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("alt") }}</dt> <dd>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 <strong>href</strong> attribute is used.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("coords") }}</dt> <dd>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 <strong>shape</strong> attribute. For a <code>rect</code> or rectangle shape, the <strong>coords</strong> value is two x,y pairs: left, top, right, and bottom. For a <code>circle</code> shape, the value is <code>x,y,r</code> where <code>x,y</code> is a pair specifying the center of the circle and <code>r</code> is a value for the radius. For a <code>poly</code> or polygon&lt; shape, the value is a set of x,y pairs for each point in the polygon: <code>x1,y1,x2,y2,x3,y3,</code> 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.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("href") }}</dt> <dd>The hyperlink target for the area. Its value is a valid URL. In HTML4, either this attribute or the <strong>nohref</strong> attribute must be present in the element. In HTML5, this attribute may be omitted; if so, the area element does not represent a hyperlink.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("hreflang") }} {{ HTMLVersionInline("5") }}</dt> <dd>Indicates the language of the linked resource. Allowed values are determined by <a class=" external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Use this attribute only if the <strong>href</strong> attribute is present.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("name") }} {{ HTMLVersionInline("4") }} only, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> <dd>Define a names for the clickable area so that it can be scripted by older browsers.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("media") }} {{ HTMLVersionInline("5") }}</dt> <dd>A hint of the media for which the linked resource was designed, for example <code>print and screen</code>. If omitted, it defaults to <code>all</code>. Use this attribute only if the <strong>href</strong> attribute is present.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("nohref") }} {{ HTMLVersionInline("4") }} only, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> <dd>Indicates that no hyperlink exists for the associated area. Either this attribute or the <strong>href</strong> attribute must be present in the element. <div class="note"> <p><strong>Usage note: </strong>This attribute is obsolete in HTML5, instead omitting the <strong>href</strong> attribute is sufficient.</p> </div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("rel") }} {{ HTMLVersionInline("5") }}</dt> <dd>For anchors containing the <strong>href</strong> attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of relationship 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 <strong>href</strong> attribute is present.</dd> <dt>{{ htmlattrdef("shape") }}</dt> <dd>The shape of the associated hot spot. The specifications for HTML 5 and HTML 4 define the values <code>rect</code>, which defines a rectangular region; <code>circle</code>, which defines a circular region; <code>poly</code>, which defines a polygon; and <code>default</code>, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support <code>circ</code>, <code>polygon</code>, and <code>rectangle</code> as valid values for <strong>shape</strong>; these values are {{ Non-standard_inline() }}.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("tabindex") }} {{ HTMLVersionInline("4") }} only, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> <dd>A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("target") }}</dt> <dd>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 <em>browsing context</em> (for example, tab, window, or inline frame). The following keywords have special meanings: <ul> <li><span style="font-family: Courier New;">_self</span>: 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.</li> <li><span style="font-family: Courier New;">_blank</span>: Load the response into a new unnamed HTML4 window or HTML5 browsing context.</li> <li><span style="font-family: Courier New;">_parent</span>: Load the response into the HMTL4 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 <span style="font-family: Courier New;">_self</span>.</li> <li><span style="font-family: Courier New;">_top</span>: 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 <span style="font-family: Courier New;">_self</span>.</li> </ul> Use this attribute only if the <strong>href</strong> attribute is present. </dd> <dt>{{ htmlattrdef("type") }}</dt> <dd>This attribute specifies the media type in the form of a MIME type for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see <a class="linkification-ext external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. Use this attribute only if the <strong>href</strong> attribute is present.</dd>
</dl>
<h2>Example</h2>
<pre class="brush: html">&lt;map name="primary"&gt;
  &lt;area shape="circle" coords="200,250,25" href="another.htm" /&gt; 
  &lt;area shape="default" nohref /&gt;
&lt;/map&gt;
</pre>
<h2>DOM Interface</h2>
<p>This element implements the <code><a href="/en/DOM/HTMLAreaElement" title="en/DOM/HTMLAreaElement">HTMLAreaElement</a></code> interface.</p>
<h2>Notes</h2>
<p>Under the HTML 3.2, 4.0, and 5 specifications, the closing tag <code>&lt;/area&gt;</code> is forbidden.</p>
<p>The XHTML 1.0 specification requires a trailing slash: <code>&lt;area /&gt;</code>.</p>
<p>The <strong>id</strong>, <strong>class</strong>, and <strong>style</strong> attributes have the same meaning as the core attributes defined in the HTML 4 specification, but only Netscape and Microsoft define them.</p>
<div class="geckoVersionNote">
<p>{{ gecko_callout_heading("5.0") }}</p>
<p>Prior to Gecko 5.0 {{ geckoRelease("5.0") }}, empty areas were skipped over in favor of non-empty ones when in quirks mode; this is no longer the case. See {{ bug("587469") }}.</p>
</div>
<p>Netscape 1–level browsers do not understand the <strong>target</strong> attribute as it relates to frames.</p>
<p>HTML 3.2 defines only <strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong>, and <strong>shape</strong>.</p>
<p>{{ HTML:Element_Navigation() }}</p>
<p>{{ languages( { "pl": "pl/HTML/Element/area" } ) }}</p>
Revert to this revision