HTML-Link-Tags

Mit dem HTML-<link>-Tag verankern Sie Hyperlinks zu internen oder externen Zielen wie URLs, Medien, Dateien oder anderen Elementen im HTML-Text. So sorgen Sie für bessere Navigierbarkeit, optimierte SEO-Eigenschaften sowie Benutzerfreundlichkeit. 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, Verlinkungen auf interne oder externe Ressourcen in einem HTML-Dokument zu verankern. Durch <a>-Tags lassen sich Hyperlinks zu externen oder internen Websites sowie Verknüpfungen zu Dateien, Dokumenten und Downloads integrieren. Mithilfe von <link>-Tags können Sie Ressourcen wie Stylesheets, Schriftarten und Icons integrieren, was die Funktionalität, Benutzerfreundlichkeit und Navigierbarkeit innerhalb einer Seite verbessert.

Was ist der Unterschied zwischen <a> und <link>?

Um Hyperlinks oder externe Ressourcen einzubinden, kommen je nach Fall die HTML Tags <a> oder <link> in Frage. Da sie jeweils verschiedene Zwecke und Funktionen erfüllen, sollten Sie die Unterschiede beachten:

  • <a>: Das Tag <a> steht für „Anchor“, denn mit diesem Tag lassen sich Hyperlinks zu URLs oder Bildern, Grafiken und Videos in HTML-Seiten verankern. Dabei kann es sich um Elemente innerhalb derselben Website oder um externe Ressourcen handeln.
  • <link>: Mit dem <link>-Tag können Sie vor allem externe Ressourcen wie CSS-Stylesheets, Favicons, Dokumente oder Schriftarten in HTML-Dokumente einbinden. Damit beeinflussen Sie, wie eine HTML-Seite aussieht und sich verhält oder wie gut die Seite durch Prefetching oder bevorzugte URLs (Canonical URLs) funktioniert.

Der Hauptunterschied liegt darin, dass <a> vorrangig für die Hyperlink-Einbindung verwendet wird, während <link> insbesondere zur Integrierung externer Elemente wie Stylesheets zum Einsatz kommt. <a>-Tags werden zudem meist innerhalb des <body>-Bereichs integriert, während <link>-Tags im <header>-Bereich zur Anwendung kommen.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

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ßenden </a> zusätzliche Elemente wie:

  • href: Mit dem Attribut HTML href definieren 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 integriert, um die Verlinkung 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 übergeordneten Frame
  • download: Legt fest, dass Hyperlinks automatisch einen Download ausführen
  • title: Dient zum Anzeigen von Titeln oder Beschreibungen im Zusammenhang mit Hyperlinks, wenn der Cursor über den verlinkten Bereich fährt -rel: Definiert das Verhältnis zwischen der aktuellen und der verlinkten Seite; z. B. lässt sich mit rel=nofollow festlegen, dass Suchmaschinen einen Hyperlink nicht durchsuchen sollen

Beispiel:

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

Syntax des <link>-Tags

Für die Einbindung des HTML-<link>-Tags kommen je nach Zweck verschiedene Varianten und HTML-Attribute in Frage:

Stylesheets verlinken

Um externe CSS-Stylesheets einzubinden und das Aussehen einer Website zu definieren, kommt folgende Syntax zum Einsatz:

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

Favicons verknüpfen

Um kleine Symbole oder Bilder (Favicons) neben URLs anzuzeigen, kommt folgende Syntax zum Einsatz.

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

Prefetching

Um die Performance beim Laden von Websites zu verbessern, lassen sich per Prefetching Ressourcen im Hintergrund laden. Hierzu kommt folgende Syntax zum Einsatz:

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

Canonical URLs oder Tags

Mit der Verlinkung von Canonical URLs oder Tags können Sie Suchmaschinen vermitteln, welche URL bevorzugt werden soll, wenn verschiedene URLs auf dieselbe Seite verlinken:

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

Alternative URLs verlinken

Wenn verschiedene Versionen derselben Website zur Auswahl stehen, beispielsweise in verschiedenen 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-Einsteiger-Tutorial, um noch mehr über die beliebte Programmiersprache zu lernen.

Welche Anwendungszwecke decken HTML-Link-Tags ab?

Gängige Anwendungsbereiche von HTML-Link-Tags sind:

  • Verbesserte Navigation durch integrierte Menüs und Navigationsleisten
  • Verlinkung und Einbindung von Hyperlinks zu internen oder externen URLs oder Ressourcen
  • Downloads von Dokumenten und Dateien
  • Effiziente Verlinkung zu internen relevanten Unterseiten durch Ankerlinks
  • Barrierefreiheit und Suchmaschinenoptimierung
  • Verbesserung von Ladezeiten und Performance von Websites
Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach
War dieser Artikel hilfreich?