# HTML-Link-Tags Mit dem HTML-``-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 `` auch das Tag `` sowie weitere Attribute. ## Was sind HTML-Link-Tags? Die HTML-Link-Tags `` und `` werden dazu verwendet, Verlinkungen auf interne oder externe Ressourcen in einem [HTML](https://www.ionos.at/digitalguide/websites/web-entwicklung/was-ist-html/)-Dokument zu verankern. Durch ``-Tags lassen sich Hyperlinks zu externen oder internen Websites sowie Verknüpfungen zu Dateien, Dokumenten und Downloads integrieren. Mithilfe von ``-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 `` und ``? Um Hyperlinks oder externe Ressourcen einzubinden, kommen je nach Fall die [HTML Tags](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-tags/) `` oder `` in Frage. Da sie jeweils **verschiedene Zwecke und Funktionen** erfüllen, sollten Sie die Unterschiede beachten: - ``: Das Tag `` 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. - ``: Mit dem ``-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 `` **vorrangig für die Hyperlink-Einbindung** verwendet wird, während `` insbesondere zur Integrierung externer Elemente wie Stylesheets zum Einsatz kommt. ``-Tags werden zudem meist innerhalb des ``-Bereichs integriert, während ``-Tags im `

`-Bereich zur Anwendung kommen. ## Die Syntax der HTML-Link-Tags erklärt Im Folgenden erklären wir Ihnen die Syntax der beiden HTML-Link-Tags `` und ``. ### Syntax des ``-Tags Um den ``-Link-Tag korrekt zu verwenden, benötigen Sie neben dem öffnenden `` und dem schließenden `` zusätzliche Elemente wie: - `href`: Mit dem Attribut [HTML href](https://www.ionos.at/digitalguide/websites/web-entwicklung/href-html/) 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 `…`-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 ``-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:** ```html Link-Text oder Bild-Tag ``` ### Syntax des ``-Tags Für die Einbindung des HTML-``-Tags kommen je nach Zweck verschiedene Varianten und [HTML-Attribute](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-attribute/) in Frage: #### Stylesheets verlinken Um **externe CSS-Stylesheets einzubinden** und das Aussehen einer Website zu definieren, kommt folgende Syntax zum Einsatz: ```html ``` #### Favicons verknüpfen Um **kleine Symbole oder Bilder (Favicons) neben URLs anzuzeigen**, kommt folgende Syntax zum Einsatz. ```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: ```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: ```html ``` #### Alternative URLs verlinken Wenn **verschiedene Versionen derselben Website** zur Auswahl stehen, beispielsweise in verschiedenen Sprachen, so lassen sie sich wie folgt verlinken: ```html ``` Tipp Werfen Sie einen Blick in unser [HTML-Einsteiger-Tutorial](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-lernen-das-grosse-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 This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/html-link-tag/](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-link-tag/) for AI/LLM consumption.