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

---
title: <link>
slug: Web/HTML/Element/link
tags:
  - Element
  - HTML
  - Metadaten
  - Referenz
  - Web
translation_of: Web/HTML/Element/link
---
<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Das <em>HTML-Link-Element</em> (<strong>&lt;link&gt;</strong>) spezifiziert Beziehungen zwischen dem aktuellen Dokument und einer externen Ressource. Mögliche Anwendungen für dieses Element sind die Definition eines relationalen Rahmens für die Navigation. Dieses Element wird am häufigsten verwendet, um mit Style Sheets zu verlinken.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td>Metadata content. If {{htmlattrxref("itemprop", "link")}} is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content"> phrasing content</a></td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>None, it is an {{Glossary("empty element")}}.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>As it is a void element, the <span title="syntax-start-tag">start tag</span> must be present and the <span title="syntax-end-tag">end tag</span> must not be present</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>Any element that accepts metadata elements. If {{htmlattrxref("itemprop", "link")}} is present: any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLLinkElement")}}</td>
  </tr>
 </tbody>
</table>

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

<p>Dieses Element beinhaltet die <a href="/de/docs/Web/HTML/Globale_Attribute">Globalen Attribute</a>.</p>

<p> </p>

<dl>
 <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt>
 <dd>Dieses Attribut definiert die Zeichenkodierung der verlinkten Ressource. Der Wert ist eine durch Leerzeichen und/oder Komma getrennte Liste von Zeichensätzen gemäß <a href="http://tools.ietf.org/html/rfc2045">RFC 2045</a>. Der Standardwert ist ISO-8859-1.
 <div class="note"><strong>Verwendungshinweis</strong>: Dieses Attribut ist in HTML5 obsolet und <strong>darf von den Autoren nicht verwendet werden</strong>. Um seine Wirkung zu erzielen, verwenden Sie den <font face="Courier New, monospace"><font color="#000000">Content-Type</font></font> HTTP-Header auf der verlinkten Ressource.</div>
 </dd>
 <dd> </dd>
 <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Dieses aufgezählte Attribut gibt an, ob das Abrufen des zugehörigen Bildes mit CORS erfolgen muss oder nicht. <a href="/en-US/docs/CORS_Enabled_Image">CORS-fähige Bilder</a> können im Element {{HTMLElement("canvas")}} wiederverwendet werden, ohne verunreinigt zu werden. Die zulässigen Werte sind:
 <dl>
  <dt>anonymous</dt>
  <dd>
  <p>Es wird eine ursprungsübergreifende Anforderung (z.B. mit <code>Origin:</code> HTTP-Header) durchgeführt. Es werden jedoch keine Anmeldeinformationen gesendet (d.h. es wird kein Cookie, kein X.509-Zertifikat und keine HTTP Basic-Authentifizierung gesendet). Wenn der Server der Ursprungsseite keine Anmeldeinformationen übergibt (indem er den <code>Access-Control-Allow-Origin:</code> HTTP-Header nicht setzt), wird das Bild verfälscht und seine Verwendung eingeschränkt.</p>
  </dd>
  <dt>use-credentials</dt>
  <dd>Eine ursprungsübergreifende Anforderung (z.B. mit <code>Origin:</code> HTTP-Header) wird mit Anmeldeinformationen ausgeführt (d.h. es wird ein Cookie, ein Zertifikat und eine HTTP-Basic-Authentifizierung durchgeführt). Wenn der Server der Ursprungsseite keine Anmeldeinformationen gibt (über <code>Access-Control-Allow-Credentials:</code> HTTP-Header), wird das Bild verfälscht und seine Verwendung eingeschränkt.</dd>
 </dl>
 Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage geholt (d.h. ohne den <code>Origin:</code> HTTP-Header zu senden), wodurch verhindert wird, dass sie in {{HTMLElement('canvas')}}} Elementen verwendet wird. Wenn ungültig, wird es so behandelt, als ob das aufgezählte Schlüsselwort <strong>anonymous</strong> verwendet wurde. Weitere Informationen finden Sie unter Attribute der <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS-Einstellungen</a>.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("disabled")}} {{Non-standard_inline}}</dt>
 <dd>Dieses Attribut wird verwendet, um eine Linkbeziehung zu deaktivieren. In Verbindung mit Scripting kann dieses Attribut verwendet werden, um verschiedene Style-Sheet-Beziehungen ein- und auszuschalten.
 <div class="note">
 <p><strong>Hinweis</strong>: Während es im HTML-Standard kein <code>disabled</code> Attribut hat, <strong>gibt</strong> es im DOM-Objekt des <code>HTMLLinkElement</code> ein <code>disabled</code> Attribut.</p>

 <p>Die Verwendung von <code>disabled</code> als HTML-Attribut ist nicht standardisiert und wird nur von einigen Browsern verwendet (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=27677">W3 #27677</a>). <strong>Verwenden Sie es nicht.</strong> Um einen ähnlichen Effekt zu erzielen, verwenden Sie eine der folgenden Techniken:</p>

 <p>Wenn das Attribut <code>disabled</code> direkt zu dem Element auf der Seite hinzugefügt wurde, darf stattdessen nicht das Element {{HTMLElement("link")}}} aufgenommen werden;<br>
  Setzt die <code>disabled</code> <strong>Eigenschaft</strong> des <code>StyleSheet</code> DOM Objekts über Skripting.</p>

 <p> </p>
 </div>
 </dd>
</dl>

<p><strong>{{htmlattrdef("href")}}</strong></p>

<p>Dieses Attribut gibt die URL der verlinkten Ressource an. Eine URL kann absolut oder relativ sein.</p>

<dl>
 <dt>{{htmlattrdef("hreflang")}}</dt>
 <dd>Dieses Attribut gibt die Sprache der verlinkten Ressource an. Es ist rein beratend. Erlaubte Werte werden von <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> für HTML5 und von <a href="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> für HTML 4 bestimmt, verwenden Sie dieses Attribut nur, wenn das Attribut {{htmlattrxref("href", "a")}}} vorhanden ist.</dd>
 <dt>{{htmlattrdef("media")}}</dt>
 <dd>Dieses Attribut gibt das Medium an, für das die verknüpfte Ressource gilt. Sein Wert muss eine <a href="/de/docs/Web/CSS/Media_Queries/Using_media_queries">Medienanfrage</a> sein. Dieses Attribut ist vor allem bei der Verknüpfung mit externen Stylesheets nützlich, da es dem Benutzeragenten ermöglicht, das am besten geeignete für das Gerät auszuwählen, auf dem es läuft.
 <div class="note"><strong>Verwendungshinweis</strong><strong>: </strong>
 <ul>
  <li>In HTML 4 kann dies nur eine einfache, durch Leerzeichen getrennte Liste von Mediendaten sein, d.h. <a href="/de/docs/Web/CSS/@media">Medientypen und -gruppen</a>, die als Werte für dieses Attribut definiert und erlaubt sind, wie z.B. <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 erweiterte dies auf jede Art von <a href="/de/docs/Web/CSS/Media_Queries/Using_media_queries">Medienabfragen</a>, die eine Obermenge der zulässigen Werte von HTML 4 darstellen.</li>
  <li>Browser, die die <a href="/de/docs/Web/CSS/Media_Queries/Using_media_queries">CSS3-Medienabfragen</a> nicht unterstützen, erkennen nicht unbedingt den passenden Link; vergessen Sie nicht, Fallback-Links zu setzen, den in HTML 4 definierten eingeschränkten Satz von Medienabfragen.</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt>
 <dd>Der Wert dieses Attributs gibt Auskunft über die Funktionen, die an einem Objekt ausgeführt werden können. Die Werte werden im Allgemeinen vom HTTP-Protokoll bei der Verwendung angegeben, aber es könnte (aus ähnlichen Gründen wie beim <strong>Titelattribut</strong>) sinnvoll sein, Beratungsinformationen im Voraus in den Link aufzunehmen. So kann beispielsweise der Browser eine andere Darstellung eines Links in Abhängigkeit von den angegebenen Methoden wählen; etwas, das durchsuchbar ist, kann ein anderes Symbol erhalten, oder ein externer Link kann mit dem Hinweis auf das Verlassen der aktuellen Website dargestellt werden. Dieses Attribut wird weder gut verstanden noch unterstützt, auch nicht vom definierenden Browser, dem Internet Explorer 4. Siehe <a href="http://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx">Methodeneigenschaften (MSDN)</a>.</dd>
 <dt>{{htmlattrdef("rel")}}</dt>
 <dd>Dieses Attribut bezeichnet eine Beziehung des verknüpften Dokuments zum aktuellen Dokument. Das Attribut muss eine durch Leerzeichen getrennte Liste der <a href="/en-US/docs/Web/HTML/Link_types">Werte der Link-Typen</a> sein. Die häufigste Verwendung dieses Attributs ist die Angabe eines Links zu einem externen Stylesheet: Das <strong>rel</strong>-Attribut ist auf <code>stylesheet</code> gesetzt, und das <strong>href</strong>-Attribut ist auf die URL eines externen Stylesheets gesetzt, um die Seite zu formatieren. WebTV unterstützt auch die Verwendung des Wertes <code>next</code> für <strong>rel</strong>, um die nächste Seite in einer Dokumentserie vorzuladen.</dd>
 <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt>
 <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{htmlattrxref("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <strong>rel</strong> attribute. <a href="/en-US/docs/Web/HTML/Link_types">Link types values</a> for the attribute are similar to the possible values for {{htmlattrxref("rel", "link")}}.
 <div class="note"><strong>Usage note: </strong>This attribute is obsolete in HTML5. <strong>Do not use it</strong>. To achieve its effect, use the {{htmlattrxref("rel", "link")}} attribute with the opposite <a href="/en-US/docs/Web/HTML/Link_types">link types values</a>, e.g. <span style="font-family: courier new;">made</span> should be replaced by <span style="font-family: courier new;">author</span>. Also this attribute doesn't mean <em>revision</em> and must not be used with a version number, which is unfortunately the case on numerous sites.</div>
 </dd>
 <dt>{{htmlattrdef("sizes")}} {{HTMLVersionInline(5)}}</dt>
 <dd>This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{htmlattrxref("rel","link")}} contains the <span style="font-family: courier new;">icon</span> <a href="/en-US/docs/Web/HTML/Link_types">link types value</a>. It may have the following values:
 <ul>
  <li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vectorial format, like <code>image/svg+xml</code>.</li>
  <li>a white-space separated list of sizes, each in the format <span style="font-family: courier new;"><em>&lt;width in pixels&gt;</em>x<em>&lt;height in pixels&gt;</em></span> or <span style="font-family: courier new;"><em>&lt;width in pixels&gt;</em>X<em>&lt;height in pixels&gt;</em></span>. Each of these sizes must be contained in the resource.</li>
 </ul>

 <div class="note"><strong>Usage note: </strong>

 <ul>
  <li>Most icon format are only able to store one single icon; therefore most of the time the {{htmlattrxref("sizes")}} contains only one entry. Among the major browsers, only the Apple's ICNS format allows the storage of multiple icons, and this format is only supported in WebKit.</li>
  <li>Apple's iOS does not support this attribute, hence Apple's iPhone and iPad use special, non-standard <a href="/en-US/docs/Web/HTML/Link_types">link types values</a> to define icon to be used as Web Clip or start-up placeholder: <span style="font-family: courier new;">apple-touch-icon</span> and <span style="font-family: courier new;">apple-touch-startup-icon</span>.</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("target")}}{{Non-standard_inline}}</dt>
 <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as <strong>text/html</strong>, <strong>text/css</strong>, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is <strong>text/css</strong>, which indicates a Cascading Style Sheet format.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<h3 id="Including_a_stylesheet">Including a stylesheet</h3>

<p>To include a stylesheet in a page, use the following syntax:</p>

<pre class="brush: html">&lt;link href="style.css" rel="stylesheet"&gt;
</pre>

<h3 id="Providing_alternative_stylesheets">Providing alternative stylesheets</h3>

<p>You can also specify <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">alternative style sheets</a>.</p>

<p>The user can choose which style sheet to use by choosing it from the View&gt;Page Style menu. This provides a way for users to see multiple versions of a page.</p>

<pre class="brush: html">&lt;link href="default.css" rel="stylesheet" title="Default Style"&gt;
&lt;link href="fancy.css" rel="alternate stylesheet" title="Fancy"&gt;
&lt;link href="basic.css" rel="alternate stylesheet" title="Basic"&gt;
</pre>

<h3 id="Stylesheet_load_events">Stylesheet load events</h3>

<p>You can determine when a style sheet has been loaded by watching for a <code>load</code> event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an <code>error</code> event:</p>

<pre class="brush: html">&lt;script&gt;
function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}

function sheetError() {
  alert("An error occurred loading the stylesheet!");
}
&lt;/script&gt;

&lt;link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()"&gt;
</pre>

<div class="note"><strong>Note:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</div>

<h2 id="Notes">Notes</h2>

<ul>
 <li>A <code>&lt;link&gt;</code> tag can occur only in the head element; however, there can be multiple occurrences of <code>&lt;link&gt;</code>.</li>
 <li>HTML 3.2 defines only the <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, and <strong>title</strong> attributes for the link element.</li>
 <li>HTML 2 defines the <strong>href</strong>, <strong>methods</strong>, <strong>rel</strong>, <strong>rev</strong>, <strong>title</strong>, and <strong>urn</strong> attributes for the <code>&lt;link&gt;</code> element. The <strong>methods</strong> and <strong>urn</strong> attributes were later removed from the specifications.</li>
 <li>The HTML and XHTML specifications define event handlers for the <code>&lt;link&gt;</code> element, but it is unclear how they would be used.</li>
 <li>Under XHTML 1.0, empty elements such as <code>&lt;link&gt;</code> require a trailing slash: <code>&lt;link /&gt;</code>.</li>
</ul>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '&lt;link&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '&lt;link&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<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>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Alternative stylesheets</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>disabled</code> attribute {{Non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>methods</code> attribute {{Non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>4.0</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>sizes</code> attribute</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}} {{bug("441770")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>load</code> and <code>error</code> events</td>
   <td>
    <p>19 (Webkit: 535.23)</p>

    <p>({{webkitbug(38995)}})</p>
   </td>
   <td>{{CompatGeckoDesktop("9.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>11.60</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>crossorigin</code> attribute</td>
   <td>{{CompatChrome("25")}}</td>
   <td>{{CompatGeckoDesktop("18.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOpera("15")}}</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>Alternative stylesheets</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>disabled</code> attribute {{Non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>methods</code> attribute {{Non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>4.0</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>sizes</code> attribute</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}} {{bug("441770")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>load</code> and <code>error</code> events</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("9.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>crossorigin</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("18.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
</ul>

<p id=".7B.7BHTMLRef.7D.7D">{{HTMLRef}}</p>