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

<p>Das <strong>HTML-Element </strong><strong><code>&lt;map&gt;</code></strong> wird zusammen mit {{HTMLElement("area")}} benutzt um ein Image Map zu definieren (eine klickbare Fläche).</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Kategorien für den Inhalt</th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">Eralubter Inhalt</th>
   <td>Any <a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="https://developer.mozilla.org/en/HTML/Content_categories#Transparent_content_model">transparent</a> element.</td>
  </tr>
  <tr>
   <th scope="row">Auslassung von Tags</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte elterliche Elemente</th>
   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">DOM-Schnittstelle</th>
   <td>{{domxref("HTMLMapElement")}}</td>
  </tr>
 </tbody>
</table>

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

<p><span style="line-height: 21px;">Dieses Element verwendet die </span><a href="https://developer.mozilla.org/en-US/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("name")}}</dt>
 <dd>Das Attribut "name" gibt der Map einen Namen, damit sie referenziert werden kann. Das Attribut muss vorhanden sein und muss einen Wert beinhalten, der nicht null ist und keine Leerzeichen beinhaltet. Der Wert des "name"-Attributs darf nicht mit dem "name"-Attribut eines anderen Map-Elements im selben Dokument übereinstimmen, ungeachtet der Groß-/Kleinschreibung. Falls das "id"-Attribut verwendet wird, müssen beide Attribute den selben Wert haben.</dd>
</dl>

<h2 id="Beispiel">Beispiel</h2>

<pre class="brush: html">&lt;map&gt;
  &lt;area shape="circle" coords="200,250,25" href="another.htm" /&gt;
  &lt;area shape="default" /&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">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-map-element', '&lt;map&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '&lt;map&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;map&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

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



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

<h3 id="Notizen_zu_Gecko">Notizen zu Gecko</h3>

<p>[1] Startend mit Gecko 5.0 {{geckoRelease("5.0")}}, wurden leere Karten nicht länger übersprungen zugunsten für nicht-leere Karten, als diese im eigenen Modus passten. Zum Beispiel im folgenden HTML-Dokument:</p>

<pre class="brush: html">&lt;map name="a"&gt;&lt;/map&gt;
&lt;map name="a"&gt;
  &lt;area shape="rect" coords="25,25,75,75" href="#fail"&gt;
&lt;/map&gt;
&lt;img usemap="#a" src="image.png"&gt;
</pre>

<p>Vor Gecko 5.0 musste das {{HTMLElement("img")}}-Element zur zweiten, nicht-leeren Karte, passen. Nun passt es auch zum Ersten, auch wenn die Karte leer ist.</p>

<p>[2] Von Firefox 17 ist das Standard-Aussehen des <code>&lt;map&gt;</code> HTML-Elementes  <code>display: inline;</code> und nicht mehr <code>display: block;</code>.</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{HTMLElement("a")}}</li>
 <li>{{HTMLElement("area")}}</li>
</ul>

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