Mit dem HTML-<link>-Tag verankern Sie Hy­per­links zu internen oder externen Zielen wie URLs, Medien, Dateien oder anderen Elementen im HTML-Text. So sorgen Sie für bessere Na­vi­gier­bar­keit, op­ti­mier­te SEO-Ei­gen­schaf­ten sowie Be­nut­zer­freund­lich­keit. Für das Setzen von Links nutzt man neben <link> auch das Tag <a> sowie weitere Attribute.

Was sind HTML-Link-Tags?

Die HTML-Link-Tags <a> und <link> werden dazu verwendet, Ver­lin­kun­gen auf interne oder externe Res­sour­cen in einem HTML-Dokument zu verankern. Durch <a>-Tags lassen sich Hy­per­links zu externen oder internen Websites sowie Ver­knüp­fun­gen zu Dateien, Do­ku­men­ten und Downloads in­te­grie­ren. Mithilfe von <link>-Tags können Sie Res­sour­cen wie Style­sheets, Schrift­ar­ten und Icons in­te­grie­ren, was die Funk­tio­na­li­tät, Be­nut­zer­freund­lich­keit und Na­vi­gier­bar­keit innerhalb einer Seite ver­bes­sert.

Was ist der Un­ter­schied zwischen <a> und <link>?

Um Hy­per­links oder externe Res­sour­cen ein­zu­bin­den, kommen je nach Fall die HTML Tags <a> oder <link> in Frage. Da sie jeweils ver­schie­de­ne Zwecke und Funk­tio­nen erfüllen, sollten Sie die Un­ter­schie­de beachten:

  • <a>: Das Tag <a> steht für „Anchor“, denn mit diesem Tag lassen sich Hy­per­links zu URLs oder Bildern, Grafiken und Videos in HTML-Seiten verankern. Dabei kann es sich um Elemente innerhalb derselben Website oder um externe Res­sour­cen handeln.
  • <link>: Mit dem <link>-Tag können Sie vor allem externe Res­sour­cen wie CSS-Style­sheets, Favicons, Dokumente oder Schrift­ar­ten in HTML-Dokumente einbinden. Damit be­ein­flus­sen Sie, wie eine HTML-Seite aussieht und sich verhält oder wie gut die Seite durch Pre­fet­ching oder be­vor­zug­te URLs (Canonical URLs) funk­tio­niert.

Der Haupt­un­ter­schied liegt darin, dass <a> vorrangig für die Hyperlink-Ein­bin­dung verwendet wird, während <link> ins­be­son­de­re zur In­te­grie­rung externer Elemente wie Style­sheets zum Einsatz kommt. <a>-Tags werden zudem meist innerhalb des <body>-Bereichs in­te­griert, während <link>-Tags im <header>-Bereich zur Anwendung kommen.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

Die Syntax der HTML-Link-Tags erklärt

Im Folgenden erklären wir Ihnen die Syntax der beiden HTML-Link-Tags <a> und <link>.

Syntax des <a>-Tags

Um den <a>-Link-Tag korrekt zu verwenden, benötigen Sie neben dem öffnenden <a> und dem schlie­ßen­den </a> zu­sätz­li­che Elemente wie:

  • href: Mit dem Attribut HTML href de­fi­nie­ren Sie die Ziel-URL, auf die Sie mit dem Link-Tag verweisen. Dabei kann es sich um eine absolute oder eine relative URL oder auch um eine Anker-ID für dieselbe Seite handeln.
  • Link-Text oder Bild-Tag: Die Ziel-URL wird als relative oder absolute URL innerhalb der <a>…</a>-Tags und nach dem href-Attribut in­te­griert, um die Ver­lin­kung im HTML-Text zu verankern. Dasselbe gilt im Fall von Bildern für Bilder-Tags.

Weitere optionale Attribute innerhalb von <a>-Tags:

  • target: Definiert, wo eine Ziel-URL geöffnet werden soll, z. B. mit _blank für einen neuen Tab oder ein neues Fenster oder mit _parent für einen über­ge­ord­ne­ten Frame
  • download: Legt fest, dass Hy­per­links au­to­ma­tisch einen Download ausführen
  • title: Dient zum Anzeigen von Titeln oder Be­schrei­bun­gen im Zu­sam­men­hang mit Hy­per­links, wenn der Cursor über den ver­link­ten Bereich fährt -rel: Definiert das Ver­hält­nis zwischen der aktuellen und der ver­link­ten Seite; z. B. lässt sich mit rel=nofollow festlegen, dass Such­ma­schi­nen einen Hyperlink nicht durch­su­chen sollen

Beispiel:

<a href="Ziel-URL">Link-Text oder Bild-Tag</a>
html

Syntax des <link>-Tags

Für die Ein­bin­dung des HTML-<link>-Tags kommen je nach Zweck ver­schie­de­ne Varianten und HTML-Attribute in Frage:

Style­sheets verlinken

Um externe CSS-Style­sheets ein­zu­bin­den und das Aussehen einer Website zu de­fi­nie­ren, kommt folgende Syntax zum Einsatz:

<link rel="stylesheet" href="styles.css">
html

Favicons ver­knüp­fen

Um kleine Symbole oder Bilder (Favicons) neben URLs an­zu­zei­gen, kommt folgende Syntax zum Einsatz.

<link rel="icon" href="favicon.ico">
html

Pre­fet­ching

Um die Per­for­mance beim Laden von Websites zu ver­bes­sern, lassen sich per Pre­fet­ching Res­sour­cen im Hin­ter­grund laden. Hierzu kommt folgende Syntax zum Einsatz:

<link rel="prefetch" href="nächste-seite.html">
html

Canonical URLs oder Tags

Mit der Ver­lin­kung von Canonical URLs oder Tags können Sie Such­ma­schi­nen ver­mit­teln, welche URL bevorzugt werden soll, wenn ver­schie­de­ne URLs auf dieselbe Seite verlinken:

<link rel="canonical" href="https://beispiel-url/canonical-url">
html

Al­ter­na­ti­ve URLs verlinken

Wenn ver­schie­de­ne Versionen derselben Website zur Auswahl stehen, bei­spiels­wei­se in ver­schie­de­nen Sprachen, so lassen sie sich wie folgt verlinken:

<link rel="alternate" href="alternative-url.html" type="text/html" title="alternative Seite">
html
Tipp

Werfen Sie einen Blick in unser HTML-Ein­stei­ger-Tutorial, um noch mehr über die beliebte Pro­gram­mier­spra­che zu lernen.

Welche An­wen­dungs­zwe­cke decken HTML-Link-Tags ab?

Gängige An­wen­dungs­be­rei­che von HTML-Link-Tags sind:

  • Ver­bes­ser­te Na­vi­ga­ti­on durch in­te­grier­te Menüs und Na­vi­ga­ti­ons­leis­ten
  • Ver­lin­kung und Ein­bin­dung von Hy­per­links zu internen oder externen URLs oder Res­sour­cen
  • Downloads von Do­ku­men­ten und Dateien
  • Ef­fi­zi­en­te Ver­lin­kung zu internen re­le­van­ten Un­ter­sei­ten durch An­ker­links
  • Bar­rie­re­frei­heit und Such­ma­schi­nen­op­ti­mie­rung
  • Ver­bes­se­rung von La­de­zei­ten und Per­for­mance von Websites
Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung
Zum Hauptmenü