path: root/files/de/web/html/element/a/index.html

---
title: <a>
slug: Web/HTML/Element/a
tags:
  - Element
  - HTML
  - 'HTML: fliessender Inhalt'
  - Inhalt
  - Reference
  - Web
translation_of: Web/HTML/Element/a
---
<div>{{HTMLRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Das <em>HTML-Element <code>&lt;a&gt;</code></em> (auch <em>HTML-Anker-Element</em>) definiert einen Hyperlink, ein benanntes Ziel für einen Hyperlink oder beides.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Gestaltender_Inhalt" title="Gestaltender Inhalt">gestaltender Inhalt</a>, interaktiver Inhalt, fühlbarer Inhalt.</td>
  </tr>
  <tr>
   <th scope="row">Erlaubter Inhalt</th>
   <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparent</a>, beinhaltet entweder <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> (ausgenommen interaktiven Inhalt) oder <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Gestaltender_Inhalt" title="Gestaltender Inhalt">gestaltender Inhalt</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag Wegfall</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte Elternelemente</th>
   <td>Alle Elemente die <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Gestaltender_Inhalt" title="Gestaltender Inhalt">gestaltenden Inhalt</a> akzeptieren, oder alle Elemente die <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlauben.</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte ARIA-Rollen</th>
   <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLAnchorElement")}}</td>
  </tr>
 </tbody>
</table>

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

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

<dl>
 <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Dieses Attribut zeigt, dass der Autor möchte, dass der Hyperlink verwendet wird, um eine Datei herunterzuladen. Also soll der Browser, wenn der Benutzer auf den Link klickt, diesen fragen, wo die Datei lokal gespeichert werden soll. Falls dem Attribut ein Wert zugewiesen ist, wird dieser Wert als Dateiname zum Abspeichern vorgeschlagen (der Benutzer kann diesen Namen natürlich ändern). Es gibt keine Einschränkungen für erlaubte Werte (obgleich <code>/</code> und <code>\</code> in Unterstriche konvertiert werden, um Verwechslungen mit Dateipfaden zu vermeiden). Dennoch sollten Sie beachten, dass die meisten Dateisysteme Einschränkungen bezüglich der unterstützten Interpunktion in Dateinamen haben, sowie die Browser die Dateinamen anpassen könnten.
 <div class="note">
 <p><strong>Hinweis:</strong></p>

 <ul>
  <li>Dies kann mit <a href="/de/docs/Web/API/URL.createObjectURL" title="/en-US/docs/Web/API/URL.createObjectURL"><code>blob:</code>-URLs</a> und <code>data:</code>-URLs verwendet werden, um es für Benutzer leichter zu machen, Inhalte herunterzuladen, die durch JavaScript generiert wurden (z. B. ein Bild, welches online über eine Zeichen-Anwendung erstellt wurde).</li>
  <li>Falls der HTTP-Header <code>Content-Disposition:</code> angegeben wird und einen anderen Dateinamen vorschlägt als dieses Attribut, hat der HTTP-Header Vorrang vor diesem Attribut.</li>
  <li>Falls das Attribut angegeben wird und <code>Content-Disposition:</code> den Wert <code>inline</code> hat, gibt Firefox <code>Content-Disposition</code> eine größere Wichtigkeit, wie im Fall des Dateinamens, während Chrome dem <code>download</code>-Attribut mehr Priorität gibt.</li>
  <li>Im <a href="/de/docs/Firefox_20_for_developers" title="/en-US/docs/Firefox_20_for_developers">Firefox 20</a> wird dieses Attribut nur für Links auf Dateien desselben Ursprungs angewendet.</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("href")}}</dt>
 <dd>Dieses war das einzige erforderliche Attribut für Anker, die einen Hyperlink definieren, aber es ist nicht länger erforderlich in HTML5. Wird dieses Attribut weggelassen, wird ein Platzhalter-Link erzeugt. Das <code>href</code>-Attribut zeigt das Ziel des Links an, entweder eine URL oder ein URL-Fragment. Ein URL-Fragment ist ein Name dem ein Doppelkreuz (<code>#</code>) vorausgeht, welches ein internes Ziel im aktuellen Dokument (eine <a href="/de/docs/HTML/Global_attributes#attr-id" title="Global attributes#attr-id">ID</a>) festlegt. URLs sind nicht auf Web-(HTTP-)Dokumente beschränkt. Sie können ein beliebiges Protokoll verwenden, das von Browser unterstützt wird. Zum Beispiel <code>file</code>, <code>ftp</code> und <code>mailto</code> funktionieren in den meisten Browsern.
 <div class="note">
 <p><strong>Hinweis:</strong> Sie können das spezielle Fragment „top“ verwenden, um Links zu erzeugen, die zurück zum Anfang der Seite springen. Zum Beispiel: <code>&lt;a href="#top"&gt;Return to top&lt;/a&gt;</code>. <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid" lang="en" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">Dieses Verhalten ist in HTML5 festgelegt</a>.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Dieses Attribut legt das Medium fest, zu welchem die verlinkte Seite gehört. Der Wert muss ein <a href="/de/docs/CSS/Media_queries" title="CSS/Media queries">Media Query</a> sein. Das Attribut ist sinnvoll, wenn auf externe Stylesheets verlinkt wird, während dem Browser erlaubt wird, das passende für das Gerät auszuwählen.
 <div class="note">
 <p><strong>Verwendungshinweis:</strong></p>

 <ul>
  <li>In HTML 4 ist nur eine einfache durch Leerzeichen getrennte Liste von <a href="/de/docs/CSS/@media" title="https://developer.mozilla.org/en-US/docs/CSS/@media">Media Types und Media Groups</a> definiert worden und als Werte für dieses Attribut erlaubt, z. B. <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>, … HTML 5 hat dies auf beliebige <a href="/de/docs/CSS/Media_queries" title="CSS/Media queries">Media Queries</a> erweitert, die eine Obermenge der erlaubten Werte von HTML 4 sind.</li>
  <li>Browser, welche die <a href="/de/docs/CSS/Media_queries" title="CSS/Media queries">CSS3 Media Queries</a> nicht unterstützen, werden nicht notwendigerweise den passenden Link erkennen. Vergessen Sie also nicht Fallback-Links auf die beschränkten Werte von HTML 4 zu definieren.</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Falls das Attribut <code>ping</code> vorhanden ist, wird den URLs der Zielseiten eine Benachrichtigung gesendet, wenn der Benutzer dem Hyperlink folgt.</dd>
 <dt>{{htmlattrdef("rel")}}</dt>
 <dd>Legt das Verhältnis des Zielobjekts zum Linkobjekt fest. Der Wert ist eine durch Leerzeichen getrennte Liste von <a href="/de/docs/Web/HTML/Link_types">Link-Typen</a>.</dd>
 <dt>{{htmlattrdef("target")}}</dt>
 <dd>Dieses Attribut legt fest, wo die verlinkte Quelle angezeigt wird. In HTML4 ist das der Name eines Frames oder ein Schlüsselwort für ein Frame. In HTML5 ist es ein Name eines <em>browsing context</em>es oder ein Schlüsselwort für einen <em>browsing context</em> (zum Beispiel ein Tab, Fenster oder Inline Frame). Die folgenden Schlüsselwörter haben eine spezielle Bedeutung:
 <ul>
  <li><code>_self</code>: Lädt die Antwort in dasselbe Frame (HTML4) bzw. denselben <em>browsing context</em> (HTML5) wie die aktuelle Seite. Dieser Wert ist der Standardwert.</li>
  <li><code>_blank</code>: Lädt die Antwort in ein neues unbenanntes Fenster (HTML4) bzw. einen neuen <em>browsing context</em> (HTML5).</li>
  <li><code>_parent</code>: Lädt die Antwort in den <em>frameset parent</em> des aktuellen Frames (HTML4) bzw. <em>parent browsing context</em> (HTML5) des aktuellen. Falls es keinen <em>parent</em> gibt, verhält sich dieser Wert wie <code>_self</code>.</li>
  <li><code>_top</code>: Lädt die Antwort in das gesamte Fenster und alle Frames werden überschrieben (HTML4) bzw. in den obersten <em>browsing context</em> (d.h. der <em>browsing context</em>, der dem aktuellen übergeordnet ist und keine übergeordneten <em>browsing context</em>e hat). Falls es keinen übergeordneten gibt, verhält sich dieser Wert wie <code>_self</code>.</li>
 </ul>
 Verwenden Sie dieses Attribut nur, wenn ein <code>href</code>-Attribut vorhanden ist.</dd>
 <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt>
 <dd>Dieses Attribut definiert die Zeichencodierung der verlinkten Datei. Der Wert ist eine durch Leerzeichen und/oder Komma-getrennte Liste von Zeichen-Sets nach der Definition der <a class="external" href="http://tools.ietf.org/html/rfc2045" title="http://tools.ietf.org/html/rfc2045">RFC 2045</a>. Der Standardwert ist ISO-8859-1.
 <div class="note">
 <p><strong>Verwendungshinweis:</strong> Dieses Attribut ist obsolet in HTML5 und <strong>sollte nicht mehr verwendet werden</strong>. Um denselben Effekt zu erhalten, verwenden Sie den HTTP-Header <code>Content-Type:</code> bei der verlinkten Datei.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("coords")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt>
 <dd>Bei der Verwendung mit dem <code>shape</code>-Attribut gibt dieses Attribut als durch Komma getrennte Liste von Zahlen die Koordinaten des Objekts auf der Seite an.</dd>
 <dt>{{htmlattrdef("datafld")}} {{Non-standard_inline}}</dt>
 <dd>Dieses Attribut legt den Spaltennamen des Datenquellenobjekts fest, das die Daten zur Verfügung stellt, die mit diesem Element verknüpft sind.
 <div class="note">
 <p><strong><strong>Verwendungshinweis</strong>:</strong> Dieses Attribut ist nicht standardisiert und <strong>s<strong>ollte nicht verwendet werden</strong></strong>. Um denselben Effekt zu erhalten, verwenden Sie Scripting und einen Mechanismus wie <a href="/de/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, um die Seite dynamisch zu verändern.</p>
 </div>

 <table class="fullwidth-table">
  <tbody>
   <tr>
    <td rowspan="2">Unterstützung</td>
    <td>Gecko</td>
    <td>Presto</td>
    <td>WebKit</td>
    <td>Trident</td>
   </tr>
   <tr>
    <td>Nicht unterstützt</td>
    <td>Nicht unterstützt</td>
    <td>Nicht unterstützt</td>
    <td>IE4, IE5, IE6, IE7 (Entfernt in IE8)</td>
   </tr>
   <tr>
    <td>Normatives Dokument</td>
    <td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533703%28VS.85%29.aspx">Microsoft's Data Binding: dataFld Property (MSDN)</a></td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt>{{htmlattrdef("datasrc")}} {{Non-standard_inline}}</dt>
 <dd>Dieses Attribut zeigt die ID des Datenquellenobjekts an, das die Daten zur Verfügung stellt, die mit diesem Element verknüpft sind.
 <div class="note">
 <p><strong><strong>Verwendungshinweis</strong>:</strong> Dieses Attribut ist nicht standardisiert und <strong>s<strong>ollte nicht verwendet werden</strong></strong>. Um denselben Effekt zu erhalten, verwenden Sie Scripting und einen Mechanismus wie <a href="/de/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, um die Seite dynamisch zu verändern.</p>
 </div>

 <table class="fullwidth-table">
  <tbody>
   <tr>
    <td rowspan="2">Unterstützung</td>
    <td>Gecko</td>
    <td>Presto</td>
    <td>WebKit</td>
    <td>Trident</td>
   </tr>
   <tr>
    <td>Nicht unterstützt</td>
    <td>Nicht unterstützt</td>
    <td>Nicht unterstützt</td>
    <td>IE4, IE5, IE6, IE7 (Entfernt in IE8)</td>
   </tr>
   <tr>
    <td>Normatives Dokument</td>
    <td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx">Microsoft's Data Binding: dataSrc Property (MSDN)</a></td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt>{{htmlattrdef("hreflang")}}</dt>
 <dd>Dieses Attribut zeigt die Sprache der verlinkten Datei an. Es ist nur ein Hinweis. Erlaubte Werte sind bestimmt von <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> für HTML5 und von <a class="external" href="http://www.ietf.org/rfc/rfc1766.txt" title="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> für HTML4. Verwenden Sie dieses Attribut nur, wenn ein <code>href</code>-Attribut vorhanden ist.</dd>
 <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt>
 <dd>Der Wert dieses Attributes liefert Informationen über die Funktionen, die an einem Objekt ausgeführt werden können. Die Werte werden üblicherweise vom HTTP bestimmt, wenn es verwendet wird, aber es könnte (für ähnliche Gründe wie für das <code>title</code>-Attribut) nützlich sein, hinweisende Informationen im Voraus im Link einzufügen. Zum Beispiel könnte der Browser einen Link anders anzeigen, je nachdem welche Methoden angegenben sind; etwas, das durchsuchbar ist könnte ein anderes Icon erhalten oder ein Link, der auf eine fremde Seite verweist, könnte mit einem Hinweis, die Seite zu verlassen, angezeigt werden. Dieses Attribut ist weder gut verstanden noch unterstützt, sogar vom definierenden Browser, Internet Explorer 4. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Methods Property (MSDN)</a></dd>
 <dt>{{htmlattrdef("name")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt>
 <dd>Dieses Attribut wird in einem Anker benötigt, der ein Sprungziel innerhalb einer Seite definiert. Ein Wert für <strong>name</strong> ist einem Wert für das <strong>id</strong>-Attribut ähnlich und sollte eine alphanumerische Identifikation sein, die für das Dokument eindeutig ist. Nach der HTML-4.01-Spezifikation können <strong>id</strong> und <strong>name</strong> beide mit dem <code>a</code>-Element verwendet werden, solange sie idente Werte haben.
 <div class="note">
 <p><strong>Verwendungshinweis:</strong> Dieses Attribut ist obsolet in HTML5. Verwenden Sie das <a href="/de/docs/Web/HTML/Globale_Attribute#attr-id" title="HTML/Global attributes#id">globale Attribut <strong>id</strong></a> stattdessen.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("rev")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt>
 <dd>Dieses Attribut legt einen umgekehrten Link fest und ist das inverse Verhältnis zum <strong>rel</strong>-Attribut. Es ist nützlich, um anzuzeigen, woher ein Objekt kam, sowie den Autor eines Dokuments.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("shape")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt>
 <dd>Dieses Attribut wird verwendet, um eine auswählbare Region für Hyperlinks festzulegen, die mit einer Abbildung verbunden sind, um eine Bildkarte zu erstellen. Die Werte für das Attribut sind <code>circle</code>, <code>default</code>, <code>polygon</code> und <code>rect</code>. Das Format des <strong>coords</strong>-Attributes hängt vom Wert jenes Attributs <strong>shape</strong> ab. Für <code>circle</code> ist der Wert <code>x,y,r</code>, wobei <code>x</code> und <code>y</code> die Pixelkoordinaten für den Mittelpunkt des Kreises sind und <code>r</code> der Radius in Pixeln ist. Für <code>rect</code> sollte das <strong>coords</strong>-Attribut <code>x,y,w,h</code> sein. Die Werte <code>x,y</code> legen das obere linke Eck des Rechtecks fest, während <code>w</code> und <code>h</code> die Breite bzw. Höhe festlegen. Der Wert <code>polygon</code> für <strong>shape</strong> verlangt Werte <code>x1,y1,x2,y2,...</code> für <strong>coords</strong>. Jedes der <code>x,y</code>-Paare definiert einen Punkt des Polygons, wobei aufeinander folgende Punkte sowie der letzte Punkt mit dem ersten mit geraden Linien verbunden werden. Der Wert <code>default</code> für <strong>shape</strong> verlangt, dass die gesamte beigefügte Fläche, üblicherweise ein Bild, verwendet wird.
 <div class="note"><strong>Hinweis:</strong> Es ist ratsam, das <strong>usemap</strong>-Attribut für das {{HTMLElement("img")}}-Element und das verbundene {{HTMLElement("map")}}-Element zu verwenden, um Hotspots anstatt des <strong>shape</strong>-Attributes zu definieren.</div>
 </dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>Dieses Attribut legt den Medientyp in der Form eines MIME-Types für das Linkziel fest. Im Allgemeinen ist dies nur als hilfreiche Information verfügbar, aber in Zukunft könnte ein Browser ein kleines Icon für Multimedia-Typen hinzufügen. Beispielweise könnte ein Browser ein kleines Lautsrechersymbol anzeigen, wenn <strong>type</strong> auf <code>audio/wav</code> gesetzt ist. Für eine komplette Liste von erkannten MIME-Typen siehe <a class="external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. Verwenden Sie dieses Attribut nur, wenn ein <code>href</code>-Attribut vorhanden ist.</dd>
 <dt>{{htmlattrdef("urn")}} {{Non-standard_inline}}</dt>
 <dd>Dieses angeblich von Microsoft unterstützte Attribut bezieht einen Uniform Resource Name (URN) auf den Link. Während dies auf Normungsarbeit vor Jahren basiert, ist die Bedeutung von URNs immer noch nicht gut definiert. Daher ist dieses Attribut bedeutungslos. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">urn Property (MSDN)</a></dd>
</dl>

<h2 id="Beispiel_Link_zu_einem_externen_Ort">Beispiel: Link zu einem externen Ort</h2>

<pre class="brush: html">&lt;!-- Link zu einer externen Datei --&gt;
&lt;a href="http://www.mozilla.com/"&gt;
Externer Link
&lt;/a&gt;
</pre>

<h3 id="Result" name="Result">Ergebnis</h3>

<p><a class="external" href="http://www.mozilla.com/">Externer Link</a></p>

<h2 id="Beispiel_Erstellung_eines_Bildlinks">Beispiel: Erstellung eines Bildlinks</h2>

<p>Diese kleine Beispiel verwendet ein Bild, um zur MDN-Homepage zu verlinken. Die Homepage wird in einem neun <em>browsing context</em> geöffnet, d.h. eine neue Seite oder ein neuer Tab.</p>

<pre class="brush: html">&lt;a href="https://developer.mozilla.org/de/"&gt;
  &lt;img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN-Logo" /&gt;
&lt;/a&gt;
</pre>

<h3 id="Result" name="Result">Ergebnis</h3>

<p><a href="https://developer.mozilla.org/de/"><img alt="MDN-Logo" src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"></a></p>

<h2 id="Beispiel_Erstellung_eines_E-Mail-Links">Beispiel: Erstellung eines E-Mail-Links</h2>

<p>Es ist üblich, Schaltflächen oder Links zu erstellen, die in des Benutzers E-Mail-Programm geöffnet werden, um ihnen zu erlauben, eine neue Nachricht zu senden. Dies wird mit <code>mailto</code>-Links gemacht. Hier ein einfaches Beispiel:</p>

<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;E-Mail senden&lt;/a&gt;</pre>

<p>Dies führt zu einem Link, der so aussieht: <a href="mailto:nowhere@mozilla.org">E-Mail senden</a>.</p>

<p>Für weitere Details über das <code>mailto</code>-URL-Schema, z.B. wie man Betreff, Nachrichtentext oder ähnliches festlegt, siehe <a href="/de/docs/Web/Guide/HTML/Email_links">E-Mail-Links</a> oder {{RFC(6068)}}.</p>

<h2 id="Beispiel_Verwendung_des_download-Attributes_um_ein_canvas_als_PNG_zu_speichern">Beispiel: Verwendung des download-Attributes, um ein canvas als PNG zu speichern</h2>

<p>Falls Sie einem Benutzer erlauben möchten, ein HTML-Canvas als Bild herunterzuladen, können Sie einen Link mit <code>download</code>-Attribut und den <code>canvas</code>-Daten als Datei-URL erstellen:</p>

<pre class="brush: js"><strong style="color: #000066; font-weight: bold;">var</strong> link <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'a'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
link.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> <span style="color: #3366cc;">'Bild herunterladen'</span><span style="color: #339933;">;</span>
link.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'click'</span><span style="color: #339933;">,</span> <strong style="color: #000066; font-weight: bold;">function</strong><span style="color: #009900;">(</span>ev<span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
    link.<span style="color: #660066;">href</span> <span style="color: #339933;">=</span> canvas.<span style="color: #660066;">toDataURL</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
    link.<span style="color: #660066;">download</span> <span style="color: #339933;">=</span> <span style="color: #3366cc;">"meinBild.png"</span><span style="color: #339933;">;</span>
<span style="color: #009900;">}</span><span style="color: #339933;">,</span> <strong style="color: #003366; font-weight: bold;">false</strong><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
document.<span style="color: #660066;">body</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">(</span>link<span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre>

<p>Hier können Sie dies in Aktion sehen <a href="http://jsfiddle.net/codepo8/V6ufG/2/">http://jsfiddle.net/codepo8/V6ufG/2/</a></p>

<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', 'text-level-semantics.html#the-a-element', '&lt;a&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '&lt;a&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '&lt;a&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>href="#top"</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("10.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>{{htmlattrxref("download","a")}}</td>
   <td>14</td>
   <td>{{CompatGeckoDesktop("20.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>href="#top"</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("10.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>{{htmlattrxref("download","a")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("20.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<p>Die folgenden sind reservierte Browser Schlüsselverbindungen für die 2 Hauptbrowser und sollten nicht als Wert eines Zugangsschlüssels benutzt werden: a, c, e, f, g, h, v, Pfeil links, and Pfeil rechts.</p>

<p>HTML 3.2 definiert nur <strong>name</strong>, <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, und <strong>title</strong>.</p>

<p>Das <strong>target</strong> Attribut ist nicht definiert in Browsern die keine Frames unterstützen, so wie Netscape 1 Generation Browser. Desweiteren, ist target nicht erlaubt in Varianten von <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> sondern ist limitiert nur auf frameset oder Transit-Formulare.</p>

<h3 id="JavaScript_Empfehlungen">JavaScript Empfehlungen</h3>

<p>Es ist öfters der Fall, dass ein Anker-Tag benutzt wird zusammen mit dem <code>onclick</code> Event. Um zu verhindern, dass die Seite sich neu lädt, wird <strong>href</strong> durch entweder "#" oder "javascript:void(0)" gesetzt. Beide Werte können zu unerwarteten Fehlern führen, wenn Hyperlinks kopiert oder in einem neuen Tab und/oder Fenster geöffnet werden. Seien Sie sich dieses Gebrauchs bewusst, und ausserdem, dass wenn Benutzer Anker-Tags benutzen, aber das generelle Verhalten verhindert wird.</p>

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

<ul>
 <li>Andere Elemente, die Text semantisch beschreiben: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
</ul>