---
title: <area>
slug: Web/HTML/Element/area
tags:
  - Eingebettet
  - Element
  - HTML
  - Inhalt
  - Multimedia
  - Referenz
  - Web
translation_of: Web/HTML/Element/area
---
<h2 id="Übersicht">Übersicht</h2>

<p class="seoSummary">Das <em>HTML-Element <code>&lt;area&gt;</code> </em>definiert einen Bereich auf einem Bild als Hot-Spot. Optional kann auf diesem Bereich ein {{Glossary("Hyperlink", "Hyperlink")}} hinterlegt werden. Dieses Element kann nur innerhalb eines {{HTMLElement("map")}} Elements verwendet werden.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/de/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
   <td><a href="/de/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierung</a>.</td>
  </tr>
  <tr>
   <th scope="row">Erlaubter Inhalt</th>
   <td>Keiner, es ist ein {{Glossary("empty element", "leeres Element")}}.</td>
  </tr>
  <tr>
   <th scope="row">Tag Wegfall</th>
   <td>Es muss einen Start-Tag und keinen End-Tag geben.</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte Elternelemente</th>
   <td>Jedes Element, das <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungen</a> akzeptiert. Das <code>&lt;area&gt;</code> Element muss direkt oder indirekt ein Kind eines {{HTMLElement("map")}} Elements sein.</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLAreaElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attribute">Attribute</h2>

<p><span style="line-height: 21px;">Dieses Element besitzt die globalen Attribute </span><a href="https://developer.mozilla.org/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
 <dd>Spezifiziert einen Tastatur-Shortcut für dieses Element. Eine Tastenkombination mit ALT oder einer ähnlichen Taste in Verbindung mit dem angegebenen Zeichen selektiert die damit assoziierte From Control. Dabei sollten keine von Webbrowsern vorbelegten Tastenkombinationen verwendet werden. Dieses Attribut ist seit HTML5 global.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("alt")}}</dt>
 <dd>Ein alternativer Text zum Einblenden, wenn der Webbrowser keine Bilder darstellt. Der Text soll dem Benutzer den Inhalt des Bildes beschreiben. In HTML4 ist dieses Attribut verpflichtend aber es kann ein leerer Text ("") angegeben werden. In HTML5 ist dieses Attribute nur verpflichtend, wenn das <strong>href</strong> Attribut vewendet wird.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("coords")}}</dt>
 <dd>Eine Menge von Werten, welche die Koordinaten des Hot-Spot Bereichs angeben. Die Anzahl und die Bedeutung der Werte hängt von dem Wert des <strong>shape</strong> Attributs ab. Für <code>rect</code> (rechteckige Form) beinhaltet der Wert von <strong>coords</strong> zwei x,y Pare: left, top, right und bottom. Für <code>circle</code> (kreisförmige Form) besteht der Wert aus <code>x,y,r</code>. Dabei sind <code>x,y</code> ein Paar, dass die Position des Kreismittelpunkt angibt und <code>r</code> ist der Radius. Für <code>poly</code> (Polygon) beinhaltet der Wert mehrere x,y Paare, wobei jedes Paar für einen Punkt im Polygon steht: <code>x1,y1,x2,y2,x3,y3,</code> usw. In HTML4 sind die Werte die Anzahl Pixel oder Prozente, wenn ein Prozentzeichen (%) angehängt wird. In HTML5 sind die Werte die Anzahl von CSS Pixel.</dd>
 <dt>{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}</dt>
 <dd>Dieses Attribut gibt an, sofern es verwendet wird, dass der Autor den Hyperlink zum Dowload einer Ressource verwendet. Siehe {{HTMLElement("a")}} für eine vollständige Beschreibung des {{htmlattrxref("download", "a")}} Attributs.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("href")}}</dt>
 <dd>Das Ziel des Hyperlinks für diesen Bereich. Der Wert muss eine gültige URL sein. In HTML4 muss entweder dieses Attribut oder das <strong>nohref</strong> Attribut im Element sein. In HTML5 kann dieses Attribut ausgelassen werden. In diesem Fall repräsentiert das area Element keinen Hyperlink.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt>
 <dd>Gibt die Sprache der verlinkten Ressource an. Erlaubte Werte sind in <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> bestimmt worden. Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
 <dd>Definiert einen Namen für den anklickbaren Bereich, damit er von älternen Webbrowserns mittels Scripting verwendet werden kann.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}</dt>
 <dd>Ein Hinweis zum Medium, für welches die verlinkte Ressource ausgelegt ist (zum Beispiel: <code>print und screen</code>.). Wenn es ausgelassen wird, wird der Standardwert <code>all</code> angenommen. Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
 <dd>Gibt an, dass auf diesem Bereich kein Hyperlink hinterlegt ist. Es muss entweder dieses Attribut oder das <strong>href</strong> Attribut in diesem Element verwendet werden.
 <div class="note">
 <p><strong>Verwendungshinweis: </strong>Dieses Attribut ist seit HTML5 veraltet. Stattdessen ist das Auslassen des <strong>href</strong> Attributs ausreichend.</p>
 </div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt>
 <dd>Dieses Attribut spezifiziert für Anker im <strong>href</strong> Attribut die Beziehung zwischen dem Zielobjekt und dem Linkobjekt. Der Wert ist eine kommaseparierte Liste von <a href="https://developer.mozilla.org/de/docs/Web/HTML/Link_types">Linktypen</a>. Die Werte und deren Semantik werden von Autorität eingetragen, welche die entsprechenden Rechte am Dokument besitzt. Der Standardwert ist void, wenn kein anderer Wert angegeben ist. Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd>
 <dt>{{htmlattrdef("shape")}}</dt>
 <dd>Die Form vom Hot-Spot. Die Spezifikationen für HTML 5 und HTML 4 definieren die Werte <code>rect</code> (rechteckiger Bereich), <code>circle</code> (kreisförmiger Bereich), <code>poly</code> (für ein Polygon) und <code>default</code> (für den ganzen Bereich außerhalb der definierten Bereiche). Viele Webbrowser, insbesonders Internet Explorer 4 und höher, unterstützen <code>circ</code>, <code>polygon</code> und <code>rectangle</code> als gültige Werte für <strong>shape</strong>, welche nicht spezifiziert sind {{Non-standard_inline}}.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
 <dd>Ein numerischer Wert, der die Position in der Reihenfolge des Tabbing im Webbrowser definiert. Dieses Attribut ist in HTML5 global.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("target")}}</dt>
 <dd>Dieses Attribut gibt an, wo die verlinkte Ressource dargestellt werden soll. In HTML4 ist das der Name oder ein Schlüssenwort für einen Frame. In HTML5 ist es der Name oder ein Schlüsselwort für einen <em>browsing context</em> (zum Beispiel: tab, window oder inline frame). Die folgenden Schlüsselwörter haben eine spezielle Bedeutung:
 <ul>
  <li><code>_self</code>: Lädt die Antwort in denselben HTML4 Frame (oder HTML5 browsing context) wie der aktuelle. Das ist der Standardwert, wenn das Attribut nicht angegeben wird.</li>
  <li><code>_blank</code>: Lädt die Antwort in ein neues unbenanntes HTML4 Fenster oder HTML5 browsing context.</li>
  <li><code>_parent</code>: Lädt die Antwort in  das HTML4 Frameset Parent des aktuellen Framee oder in den HTML5 parent browsing context des aktuellen. Wenn es kein Parent gibt, verhält sich diese Option wie <code>_self</code>.</li>
  <li><code>_top</code>: In HTML4: Lädt die Antwort in das volle, originale Fenster und löscht alle anderen Frames. In HTML5: Lädt die Antwort in den top-level browsing context (der browsing context, der ein Parent des aktuellen ist und selbst kein Parent hat). Wenn es kein Parent gibt, verhält sich diese Option wie <code>_self</code>.</li>
 </ul>
 Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>Dieses Attribut spezifiziert den Medientyp des Linkziels als MIME Type. Normalerweise wird dies streng als beratende Information angeboten. In der Zukunft könnte ein Webbrowser aber ein kleines Icon zum Multimediatyp hinzufügen (zum Beispiel: ein Webbrowser zeigt ein Icon mit einem Lautsprecher an, wenn der Typ auf audio/wav gesetzt ist). Eine vollständige Liste der erkannten MIME types ist unter <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> zu finden. Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd>
</dl>

<h2 id="Beispiel">Beispiel</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 id="Specifications" name="Specifications">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Bemerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>



<p>{{Compat("html.elements.area")}}</p>

<h2 id="Hinweise">Hinweise</h2>

<p>Unter den HTML 3.2, 4.0 und 5 Spezifikationen ist der End-Tag <code>&lt;/area&gt;</code> verboten.</p>

<p>Die XHTML 1.0 Spezifikation verlangt einen nachfolgenden Slash: <code>&lt;area /&gt;</code>.</p>

<p>Die Attribute <strong>id</strong>, <strong>class</strong>, und <strong>style</strong> haben dieselbe Bedeutung wie die in HTML 4 definierten Kernattribute. Aber nur Netscape und Microsoft definieren sie.</p>

<p>Netscape 1–level Webbrowser verstehen das <strong>target</strong> Attribut in dem Sinne, dass es sich auf Frames bezieht.</p>

<p>HTML 3.2 definiert nur <strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong> und <strong>shape</strong>.</p>

<p>{{HTMLRef}}</p>