So verlinken Sie eine Internetseite richtig – Schritt-für-Schritt-Anleitung

Um eine Internetseite zu verlinken, können Sie verschiedene Methoden verwenden, je nachdem, wo Sie den Link platzieren möchten (z. B. in einem Textdokument, einer E-Mail, einem Blogpost, einer HTML-Seite usw.). Hier sind die grundlegenden Schritte für die verschiedenen Methoden:

1. Verlinkung in HTML

Wenn Sie eine Webseite erstellen und einen Link in HTML einfügen möchten, verwenden Sie das <a>-Tag (Anchor-Tag). Hier ist ein Beispiel:

Besuchen Sie Beispielseite

2. Verlinkung in einem Word-Dokument

Um einen Link in einem Microsoft Word-Dokument zu erstellen:

  1. Markieren Sie den Text, den Sie verlinken möchten.

  2. Klicken Sie auf die Registerkarte "Einfügen".

  3. Wählen Sie "Link" oder drücken Sie Strg + K.

  4. Geben Sie die URL der Webseite in das Feld "Adresse" ein.

  5. Klicken Sie auf "OK".

3. Verlinkung in einer E-Mail (HTML-Format)

In den meisten E-Mail-Clients können Sie Links einfach einfügen. So geht es in Outlook:

  1. Schreiben Sie den Text, den Sie verlinken möchten.

  2. Markieren Sie den Text.

  3. Klicken Sie auf das Symbol "Link einfügen" oder drücken Sie Strg + K.

  4. Geben Sie die URL der Webseite in das Feld "Adresse" ein.

  5. Klicken Sie auf "OK".

4. Verlinkung in einem Blogpost (z. B. WordPress)

In den meisten Blogging-Plattformen können Sie Links leicht einfügen. In WordPress:

  1. Schreiben Sie den Text, den Sie verlinken möchten.

  2. Markieren Sie den Text.

  3. Klicken Sie auf das Kettensymbol im Editor.

  4. Geben Sie die URL ein.

  5. Klicken Sie auf "Link hinzufügen".

5. Verlinkung in Markdown (z. B. GitHub, Reddit)

In Markdown können Sie Links so einfügen:

[Besuchen Sie Beispielseite](https://www.beispielseite.de)

6. Verlinkung in einem sozialen Netzwerk (z. B. Facebook, Twitter)

Einfach die URL in das Textfeld einfügen. Die meisten sozialen Netzwerke erkennen automatisch, dass es sich um einen Link handelt, und formatieren ihn entsprechend.

Diese Methoden helfen Ihnen, Links in verschiedenen Kontexten und Anwendungen korrekt einzufügen.

Die Begriffe URL, Link und Hyperlink werden im Alltag häufig gleich verwendet. Sie bezeichnen jedoch nicht genau dasselbe.

  • URL: Die URL ist die Adresse einer Internetseite oder einer anderen Ressource. Ein Beispiel ist https://www.beispiel.de.

  • Link: Ein Link ist ein anklickbares Element, das zu einer anderen Internetseite, einer Datei oder einer bestimmten Stelle innerhalb eines Dokuments führt.

  • Hyperlink: Hyperlink ist die vollständige Bezeichnung für einen Link. Beide Begriffe können im normalen Sprachgebrauch gleich verwendet werden.

  • Ankertext: Der Ankertext ist der sichtbare und anklickbare Text eines Links.

Bei diesem Beispiel ist „Beispielseite besuchen“ der Ankertext und https://www.beispiel.de die Zieladresse:

<a href="https://www.beispiel.de">Beispielseite besuchen</a>

Ein verständlicher Ankertext hilft Besuchern dabei, das Ziel eines Links bereits vor dem Anklicken zu erkennen. Auch Suchmaschinen können dadurch besser verstehen, worum es auf der verlinkten Seite geht.

Ein normaler Link öffnet sich im aktuellen Browser-Tab. Soll die verlinkte Internetseite in einem neuen Tab geöffnet werden, wird in HTML das Attribut target="_blank" verwendet.

<a href="https://www.beispiel.de" target="_blank" rel="noopener">
    Beispielseite in einem neuen Tab öffnen
</a>

Das zusätzliche Attribut rel="noopener" verhindert, dass die neu geöffnete Internetseite über die JavaScript-Eigenschaft window.opener auf die ursprüngliche Seite zugreifen kann.

Links sollten nur dann automatisch in einem neuen Tab geöffnet werden, wenn es dafür einen nachvollziehbaren Grund gibt. Ein unerwarteter Tabwechsel kann insbesondere für Nutzer von Screenreadern oder Menschen mit kognitiven Einschränkungen irritierend sein.

Deshalb sollte bereits im Linktext angekündigt werden, dass sich ein neuer Tab öffnet:

<a href="https://www.beispiel.de" target="_blank" rel="noopener">
    Beispielseite öffnen – neuer Tab
</a>

Ob tatsächlich ein neuer Tab oder ein neues Fenster erscheint, hängt von den Einstellungen des verwendeten Browsers ab.

9. Wie verlinkt man eine E-Mail-Adresse oder Telefonnummer?

E-Mail-Adresse verlinken

Eine E-Mail-Adresse kann so verlinkt werden, dass sich nach dem Anklicken automatisch das auf dem Gerät eingerichtete E-Mail-Programm öffnet. Dafür wird vor der Adresse der Zusatz mailto: eingefügt.

<a href="mailto:info@beispiel.de">E-Mail schreiben</a>

Im sichtbaren Linktext muss nicht zwingend die vollständige E-Mail-Adresse stehen. Ein verständlicher Text beschreibt das Ziel häufig besser:

<a href="mailto:info@beispiel.de">
    E-Mail an den Kundenservice senden
</a>

Auch ein Betreff kann bereits vorbereitet werden:

<a href="mailto:info@beispiel.de?subject=Anfrage%20über%20die%20Website">
    Anfrage per E-Mail senden
</a>

Leerzeichen werden innerhalb solcher Links normalerweise als %20 geschrieben. Der Nutzer kann den vorbereiteten Betreff vor dem Absenden weiterhin verändern.

Telefonnummer verlinken

Telefonnummern lassen sich mit dem Zusatz tel: anklickbar machen. Das ist besonders für mobile Internetseiten und Kontaktseiten sinnvoll.

<a href="tel:+493712345678">0371 2345678 anrufen</a>

Im href-Attribut sollte möglichst die internationale Schreibweise verwendet werden. Leerzeichen, Klammern und Bindestriche sollten dort vermieden werden. Im sichtbaren Linktext darf die Telefonnummer dagegen gut lesbar formatiert werden.

Auf einem Smartphone öffnet sich nach dem Anklicken normalerweise die Telefonfunktion. Auf einem Computer kann der Link beispielsweise an eine installierte Telefonie- oder Videokonferenz-Software übergeben werden.

10. Wie kann man ein Bild verlinken?

Ein Bild wird verlinkt, indem das Bildelement innerhalb eines normalen Links eingefügt wird:

<a href="https://www.beispiel.de">
    <img src="/bilder/beispiel.jpg" alt="Zur Beispielseite">
</a>

Wenn das Bild der einzige Inhalt des Links ist, sollte der Alternativtext das Ziel oder die Funktion des Links beschreiben. Eine Beschreibung wie alt="Blaues Bild mit weißem Pfeil" wäre in diesem Fall weniger hilfreich als alt="Zur Beispielseite".

Steht neben dem Bild bereits ein verständlicher Linktext und enthält das Bild keine zusätzlichen Informationen, kann ein leerer Alternativtext verwendet werden:

<a href="/kontakt">
    <img src="/bilder/kontakt-icon.svg" alt="">
    Kontakt aufnehmen
</a>

Bei verlinkten Bildern übernimmt der Alternativtext eine ähnliche Funktion wie der Ankertext eines normalen Textlinks. Er sollte deshalb nicht nur das Aussehen des Bildes, sondern vor allem das Ziel des Links beschreiben.

11. Wie erstellt man einen verlinkten Button?

Ein Element, das Besucher zu einer anderen Internetseite oder Unterseite führt, ist technisch ein Link. Es kann mit CSS trotzdem wie ein Button gestaltet werden:

<a class="button" href="/kontakt">Angebot anfragen</a>

Ein echtes <button>-Element sollte dagegen für Aktionen verwendet werden, die auf der aktuellen Seite etwas auslösen. Dazu gehören beispielsweise:

  • ein Formular absenden,

  • ein Menü öffnen,

  • zusätzliche Inhalte einblenden,

  • einen Filter anwenden oder

  • eine Berechnung starten.

Als einfache Regel gilt:

  • Link: Führt zu einer anderen Seite, Datei oder Position.

  • Button: Löst eine Aktion auf der aktuellen Seite oder innerhalb einer Anwendung aus.

Ein Link darf optisch wie ein Button aussehen. Seine technische Funktion sollte jedoch weiterhin als Link erkennbar bleiben.

12. Wie verlinkt man eine PDF-Datei?

Eine PDF-Datei kann wie jede andere Internetadresse verlinkt werden:

<a href="/downloads/checkliste.pdf">
    Checkliste als PDF öffnen
</a>

Aus dem Linktext sollte hervorgehen, dass sich eine PDF-Datei öffnet. Bei größeren Dateien kann zusätzlich die Dateigröße genannt werden:

<a href="/downloads/checkliste.pdf">
    Checkliste öffnen – PDF, 1,2 MB
</a>

Soll der Browser die Datei nach Möglichkeit direkt herunterladen, kann das Attribut download ergänzt werden:

<a href="/downloads/checkliste.pdf" download="checkliste.pdf">
    Checkliste als PDF herunterladen
</a>

Das download-Attribut signalisiert dem Browser, dass die Datei heruntergeladen und nicht nur angezeigt werden soll. Ob dies tatsächlich geschieht, hängt jedoch vom Browser, von den Servereinstellungen und von der Herkunft der Datei ab.

Bei Dateien, die auf einer anderen Domain liegen, wird das Download-Attribut nicht von jedem Browser berücksichtigt.

Ein Sprunglink führt nicht zu einer anderen Internetseite, sondern direkt zu einem bestimmten Abschnitt auf derselben Seite. Solche Links werden auch als Ankerlinks oder Seitenanker bezeichnet.

Zunächst benötigt das Ziel eine eindeutige ID:

<h2 id="haeufige-fragen">Häufige Fragen</h2>

Anschließend wird ein Link erstellt, dessen Ziel aus einer Raute und dieser ID besteht:

<a href="#haeufige-fragen">
    Direkt zu den häufigen Fragen springen
</a>

Beim Anklicken springt der Browser direkt zum Element mit der ID haeufige-fragen.

Auch ein Sprunglink von einer anderen Unterseite ist möglich. Dafür werden die Adresse der Zielseite und die ID miteinander verbunden:

<a href="/ratgeber#haeufige-fragen">
    Häufige Fragen im Ratgeber öffnen
</a>

Sprunglinks eignen sich insbesondere für:

  • Inhaltsverzeichnisse,

  • umfangreiche Anleitungen,

  • FAQ-Bereiche,

  • Glossare und

  • lange Produkt- oder Leistungsseiten.

Jede ID darf innerhalb einer Seite nur einmal verwendet werden.

Die vollständige Internetadresse fehlt

Bei externen Links muss die Zieladresse normalerweise mit https:// beginnen. Fehlt das Protokoll, kann der Browser die Adresse als relativen Pfad innerhalb der aktuellen Website interpretieren.

Fehlerhaft:

<a href="www.beispiel.de">Beispielseite</a>

Richtig:

<a href="https://www.beispiel.de">Beispielseite</a>

Die Zieladresse wurde falsch kopiert

Schon ein fehlender Buchstabe, ein zusätzliches Leerzeichen oder ein falsches Zeichen kann dazu führen, dass ein Link nicht funktioniert. Die Zieladresse sollte deshalb nach dem Einfügen kontrolliert und getestet werden.

Der Link führt auf eine nicht mehr vorhandene Seite

Wurde die verlinkte Seite gelöscht oder verschoben, kann eine 404-Fehlerseite erscheinen. Links in älteren Beiträgen sollten deshalb regelmäßig überprüft werden.

Der Linktext beschreibt das Ziel nicht

Formulierungen wie „hier“, „mehr“ oder „klicken“ sind ohne weiteren Zusammenhang wenig aussagekräftig. Besucher sollten bereits am Linktext erkennen können, was sie nach dem Anklicken erwartet.

Weniger verständlich:

<a href="/html-anleitung">Hier klicken</a>

Besser:

<a href="/html-anleitung">
    HTML-Anleitung für Einsteiger öffnen
</a>

Ein Link wird für eine Aktion verwendet

Konstruktionen wie href="#" oder href="javascript:void(0)" werden gelegentlich verwendet, um per JavaScript ein Menü oder ein Fenster zu öffnen. Für solche Aktionen ist in der Regel ein echtes Button-Element besser geeignet.

<button type="button">Menü öffnen</button>

Ein neuer Tab öffnet sich ohne Ankündigung

Öffnet ein Link unerwartet einen neuen Tab, kann dies insbesondere für Nutzer von Screenreadern verwirrend sein. Falls ein neuer Tab notwendig ist, sollte dies im Linktext oder über eine andere zugängliche Kennzeichnung angekündigt werden.

Mehrere unterschiedliche Links haben denselben Linktext

Eine Liste aus mehreren Links mit der Bezeichnung „Mehr erfahren“ ist schwer verständlich, wenn jeder Link zu einem anderen Ziel führt. Besser sind eindeutige Formulierungen wie „Mehr über HTML-Links erfahren“ oder „WordPress-Anleitung öffnen“.

Der Link ist optisch nicht erkennbar

Links sollten sich deutlich vom normalen Text unterscheiden. Eine andere Farbe allein reicht nicht immer aus. Eine Unterstreichung oder ein weiteres sichtbares Merkmal erleichtert die Erkennbarkeit.

15. Verständliche und barrierefreie Linktexte

Ein guter Linktext ist kurz, eindeutig und beschreibt das Ziel des Links. Er sollte möglichst auch dann verständlich sein, wenn er ohne den umliegenden Absatz vorgelesen wird.

Weniger geeignet

Besser verständlich

Hier klicken

Anleitung zum Erstellen eines HTML-Links öffnen

Mehr erfahren

Mehr über interne Verlinkung erfahren

Download

SEO-Checkliste als PDF herunterladen

Website

Website der SEO Agentur Thiess besuchen

Weiter

Zum nächsten Schritt der Anleitung

Der Zweck eines Links sollte aus dem Linktext oder aus seinem direkten Zusammenhang hervorgehen. Besucher müssen erkennen können, wohin der Link führt und was sie nach dem Anklicken erwartet.

Auch die folgenden Punkte verbessern die Verständlichkeit und Barrierefreiheit:

  • Keine leeren Links ohne sichtbaren Text verwenden.

  • Das Linkziel eindeutig benennen.

  • Neue Tabs oder Fenster vorher ankündigen.

  • Bei Downloads das Dateiformat und möglichst die Dateigröße nennen.

  • Verlinkte Bilder mit einem passenden Alternativtext versehen.

  • Links nicht ausschließlich durch ihre Farbe kennzeichnen.

  • Ausreichend große anklickbare Flächen verwenden.

Aussagekräftige Linktexte helfen nicht nur Menschen mit Einschränkungen. Sie verbessern die Orientierung für alle Besucher und geben auch Suchmaschinen zusätzliche Informationen über das verlinkte Ziel.

Wie erstelle ich einen Link?

Kopieren Sie zunächst die Zieladresse der Internetseite. Markieren Sie anschließend den Text, der anklickbar werden soll, und wählen Sie die Funktion „Link einfügen“. In vielen Programmen lässt sich das Eingabefenster auch mit der Tastenkombination Strg + K öffnen.

Wie verlinke ich eine Website?

Eine Website wird verlinkt, indem ihre vollständige URL als Ziel eines Links eingetragen wird. In HTML lautet die grundlegende Schreibweise:

<a href="https://www.beispiel.de">
    Beispiel-Website besuchen
</a>

Wie füge ich einen Hyperlink ein?

Markieren Sie den gewünschten Text und drücken Sie Strg + K. Fügen Sie anschließend die vollständige Internetadresse ein und bestätigen Sie die Eingabe. Dieses Vorgehen funktioniert unter anderem in Word, Outlook, Gmail und vielen Content-Management-Systemen.

Wie kann ich einen Link zu einer Internetseite erstellen?

Für einen Link werden zwei Angaben benötigt: die Zieladresse und ein sichtbarer Linktext. Die Zieladresse bestimmt, wohin der Link führt. Der Linktext ist der Teil, den Besucher anklicken.

Wie bette ich einen Link in einen Text ein?

Markieren Sie die Wörter, die als Link erscheinen sollen. Öffnen Sie anschließend die Linkfunktion des verwendeten Programms und tragen Sie die Zieladresse ein. Statt einer sichtbaren langen URL erscheint danach nur der ausgewählte Text als anklickbarer Link.

Was ist der Unterschied zwischen einer URL und einem Link?

Die URL ist die Adresse einer Ressource im Internet. Der Link ist das anklickbare Element, das auf diese URL verweist. Eine URL kann sichtbar als Text erscheinen, ohne automatisch anklickbar zu sein.

Was ist ein Ankertext?

Der Ankertext ist der sichtbare und anklickbare Text eines Links. Er sollte möglichst verständlich beschreiben, wohin der Link führt.

Warum funktioniert mein Link nicht?

Häufige Ursachen sind eine unvollständige URL, Tippfehler, zusätzliche Leerzeichen oder eine nicht mehr vorhandene Zielseite. Bei HTML-Links können außerdem fehlende Anführungszeichen oder ein fehlerhaftes href-Attribut die Ursache sein.

Wie öffne ich einen Link in einem neuen Tab?

In HTML wird dafür das Attribut target="_blank" verwendet. Ergänzend kann rel="noopener" gesetzt werden. Besucher sollten erkennen können, dass sich nach dem Anklicken ein neuer Tab öffnet.

Kann ich auch eine E-Mail-Adresse oder Telefonnummer verlinken?

Ja. Für eine E-Mail-Adresse wird im Linkziel mailto: und für eine Telefonnummer tel: verwendet.

<a href="mailto:info@beispiel.de">E-Mail schreiben</a>
<a href="tel:+493712345678">Jetzt anrufen</a>

Kann ich ein Bild als Link verwenden?

Ja. Dafür wird das Bild innerhalb eines Linkelements eingefügt. Wenn das Bild der einzige Inhalt des Links ist, sollte sein Alternativtext das Ziel oder die Funktion des Links beschreiben.

Kann ich eine PDF-Datei verlinken?

Ja. Die Adresse der PDF-Datei wird wie eine normale URL in den Link eingefügt. Aus dem Linktext sollte hervorgehen, dass sich eine PDF-Datei öffnet oder heruntergeladen wird.

Wie verlinke ich einen Abschnitt derselben Seite?

Dafür erhält der Zielabschnitt eine eindeutige ID. Der Link verweist anschließend mit einer Raute auf diese ID, beispielsweise mit href="#haeufige-fragen".

Soll ein externer Link immer in einem neuen Tab geöffnet werden?

Nein. Ein neuer Tab sollte nur verwendet werden, wenn er für den Nutzer einen erkennbaren Vorteil bietet. Öffnet sich ein neuer Tab, sollte dies vorher angekündigt werden.