Was ist ein Hyperlink?

Hyperlinks sind eingebettete Verweise, die eine nahtlose Navigation zwischen Dokumenten ermöglichen, Webseiten, und verschiedene Abschnitte innerhalb einer Seite.

Ein Hyperlink, oft einfach als Link bezeichnet, ist ein Verweis in einem digitalen Dokument, der es Benutzern ermöglicht, von einer Stelle zur anderen innerhalb desselben Dokuments, über verschiedene Dokumente hinweg oder zu ganz anderen Websites zu navigieren. Dieser Verweis ist normalerweise in Text oder Bild eingebettet und weist den Benutzer an, beim Anklicken Browser or Anwendung um das angegebene Ziel zu laden. Hyperlinks sind ein wesentlicher Bestandteil von Hypertext, dem System, das die nichtlineare Navigation von Informationen im Internet ermöglicht.

Link vs. Hyperlink

Die Begriffe „Link“ und „Hyperlink“ werden häufig synonym verwendet, es gibt jedoch einen feinen Unterschied zwischen den beiden.

Ein „Link“ ist ein weit gefasster Begriff, der sich im Allgemeinen auf jedes Element in einem Dokument oder einer Webseite bezieht, das mit einem anderen Ort verknüpft ist. Dies kann sowohl Text als auch Bilder umfassen. Ein „Hyperlink“ hingegen bezieht sich speziell auf einen in Hypertext eingebetteten Link. Dabei handelt es sich um Text, der auf einem Computer oder digitalen Gerät mit Hyperlinks angezeigt wird, die Zugriff auf anderen Text oder Informationen bieten.

Obwohl alle Hyperlinks Links sind, werden nicht alle Links als Hyperlinks betrachtet. Ein Beispiel: URL In ein reines Textdokument eingegebene Wörter sind ein Link, aber erst dann ein Hyperlink, wenn sie in einem Hypertextsystem anklickbar sind. Im Wesentlichen ist ein Hyperlink eine spezifischere Form eines Links, die eine einfache und interaktive Navigation innerhalb und zwischen digitalen Dokumenten ermöglichen soll.

Was ist der Zweck von Hyperlinks?

Der Hauptzweck von Hyperlinks besteht darin, eine einfache und intuitive Navigation zwischen verschiedenen digitalen Inhalten zu ermöglichen, sei es innerhalb desselben Dokuments oder über mehrere Dokumente und Websites hinweg. Hyperlinks ermöglichen Benutzern den schnellen Zugriff auf verwandte Informationen und verbessern das allgemeine Benutzererlebnis, indem sie eine nahtlose Möglichkeit zum Erkunden miteinander verbundener Ressourcen bieten. Sie dienen als Grundlage der Webstruktur und ermöglichen die nichtlineare Erkundung von Inhalten, die für die Funktionsweise des Internets von zentraler Bedeutung ist.

Hyperlinks sind nicht nur eine Hilfe bei der Navigation, sondern auch wichtig, um Informationen so zu organisieren und zu strukturieren, dass sie leichter zugänglich und verständlich sind. Sie verknüpfen relevante Themen, bieten zusätzlichen Kontext und helfen Benutzern, tiefer in bestimmte Interessensgebiete einzutauchen, ohne den Hauptinhalt zu überladen.

Hyperlinks spielen außerdem eine wichtige Rolle bei der SEO (Suchmaschinenoptimierung), indem sie Suchmaschinen dabei unterstützen, Inhalte auf Grundlage der Beziehungen zwischen verlinkten Seiten zu indizieren und zu bewerten, und so Einfluss darauf nehmen, wie Informationen in Suchergebnissen gefunden und priorisiert werden.

Eine kurze Geschichte der Hyperlinks

Das Konzept der Hyperlinks hat seine Wurzeln in der frühen Vision des Hypertexts, eines Systems, das es ermöglicht, Texte auf nichtlineare Weise miteinander zu verknüpfen. Diese Idee wurde erstmals 1945 von Vannevar Bush in seinem Essay „As We May Think“ formuliert, in dem er eine Maschine namens „Memex“ vorstellte, die es Benutzern ermöglichen würde, mithilfe verknüpfter Verknüpfungen zwischen Dokumenten zu navigieren.

Der moderne Hyperlink nahm in den 1960er Jahren mit der Entwicklung des Hypertext Editing System (HES) und später fortschrittlicherer Systeme wie Ted Nelsons Projekt Xanadu Gestalt an, dessen Ziel die Schaffung eines globalen Netzwerks verknüpfter Informationen war.

Der eigentliche Durchbruch kam Ende der 1980er und Anfang der 1990er Jahre mit der Erfindung des World Wide Web von Sir Tim Berners-Lee. Er schlug die Verwendung von Hyperlinks als grundlegenden Bestandteil der Webarchitektur vor, sodass Benutzer auf hervorgehobenen Text oder Bilder klicken konnten, um zwischen verwandten Webseiten zu wechseln. Die erste erfolgreiche Implementierung von Hyperlinks erfolgte mit der Veröffentlichung von Berners-Lees Webbrowser WorldWideWeb im Jahr 1991, der es Benutzern ermöglichte, das wachsende Web über anklickbare Links zu erkunden.

Seitdem sind Hyperlinks zu einem allgegenwärtigen Element des Internets geworden und bestimmen, wie Informationen weltweit verknüpft, abgerufen und geteilt werden. Sie haben sich von einfachen textbasierten Links zu komplexeren Formen entwickelt, darunter eingebettete Multimedia- und dynamische Inhalte, aber ihr Hauptzweck, nämlich die Verknüpfung von Informationen, ist derselbe geblieben.

Hyperlink-Typen

Hyperlinks gibt es in verschiedenen Formen, die jeweils für bestimmte Funktionen in digitalen Inhalten konzipiert sind. Für effektives Webdesign und Benutzernavigation ist es wichtig, die verschiedenen Arten von Hyperlinks zu verstehen. Nachfolgend finden Sie eine Erläuterung der am häufigsten verwendeten Arten von Hyperlinks.

Text-Hyperlinks

Text-Hyperlinks sind der häufigste Typ. Dabei wird der Benutzer durch anklickbaren Text (oft unterstrichen und in einer anderen Farbe) an eine andere Stelle weitergeleitet. Diese Links sind normalerweise in den Textkörper eines Dokuments oder einer Webseite eingebettet und werden durch die HTML Tag, der die Ziel-URL enthält. Wenn Benutzer auf Text-Hyperlinks klicken, können sie zu einer neuen Seite, einem anderen Abschnitt derselben Seite oder einer externen Website navigieren.

Bild-Hyperlinks

Bild-Hyperlinks sind anklickbare Bilder, die die gleiche Funktion haben wie Text-Hyperlinks. Anstelle von Text wird ein Bild als anklickbares Element verwendet. Diese Hyperlinks sind nützlich, um visuell ansprechende Navigationselemente zu erstellen, wie z. B. Schaltflächen, Banner oder Symbole, die beim Anklicken zu anderen Seiten oder Ressourcen führen.

Inline-Hyperlinks

Inline-Hyperlinks sind in einen Textblock eingebettet und dienen dazu, auf verwandte Inhalte zu verweisen oder zusätzliche Informationen bereitzustellen, ohne den Lesefluss zu unterbrechen. Diese Links werden häufig in Artikeln oder Dokumenten verwendet, um Leser zu Quellen, Definitionen oder ausführlichen Erklärungen zu leiten, die für den Hauptinhalt relevant sind.

Ankerlinks (Sprunglinks)

Ankerlinks, auch Sprunglinks genannt, ermöglichen es Benutzern, zu einem bestimmten Teil derselben Webseite zu navigieren. Diese Hyperlinks sind besonders nützlich für lange Webseiten wie Artikel, FAQs oder einseitige Websites, wo sie einen schnellen Zugriff auf verschiedene Abschnitte ermöglichen, indem sie direkt zum gewünschten Inhalt springen.

E-Mail-Hyperlinks

E-Mail-Hyperlinks öffnen den Standard-E-Mail-Client eines Benutzers und erstellen beim Anklicken eine neue E-Mail-Nachricht. Diese Links werden mit dem URL-Schema „mailto:“ formatiert und werden häufig auf Websites verwendet, damit Benutzer problemlos per E-Mail Kontakt mit jemandem aufnehmen können. Der Link kann auch eine vordefinierte Betreffzeile oder einen vordefinierten Nachrichtentext enthalten.

Datei-Hyperlinks

Datei-Hyperlinks leiten Benutzer zum Herunterladen einer bestimmten Datei, z. B. einer PDF-Datei, eines Bilds oder eines Dokuments. Diese Links werden häufig in Bildungs- oder Berufsumgebungen verwendet, in denen Benutzer direkt von einer Webseite auf herunterladbare Ressourcen zugreifen müssen. Beim Anklicken wird die Datei normalerweise auf das Gerät des Benutzers heruntergeladen.

Externe Hyperlinks

Externe Hyperlinks leiten Benutzer zu einer anderen Website oder Domäne als der, die sie gerade besuchen. Diese Links sind wichtig, um auf Quellen zu verweisen, Benutzer zu zusätzlichen Ressourcen zu führen oder den Datenverkehr auf Partner-Websites umzuleiten. Sie werden normalerweise in einem neuen Browser-Tab oder -Fenster geöffnet, um die aktuelle Browsersitzung des Benutzers aufrechtzuerhalten.

Interne Hyperlinks

Interne Hyperlinks verbinden verschiedene Seiten innerhalb derselben Website oder Domain. Sie sind für die Website-Navigation von entscheidender Bedeutung und helfen Benutzern, zwischen verschiedenen Abschnitten oder Seiten einer Site zu wechseln. Interne Links spielen auch bei der SEO eine wichtige Rolle, indem sie die Struktur der Site verbessern und Suchmaschinen helfen, die Beziehung zwischen verschiedenen Seiten zu verstehen.

Wie erstelle ich einen Hyperlink?

Das Erstellen eines Hyperlinks ist ein unkomplizierter Vorgang, bei dem Sie Ihrem Text oder Bild einen bestimmten HTML-Code hinzufügen, um ihn anklickbar zu machen und Benutzer an eine andere Stelle zu leiten. Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung zum Erstellen eines einfachen Hyperlinks:

1. Wählen Sie den Text oder das Bild. Entscheiden Sie zunächst, welchen Text oder welches Bild Sie in einen Hyperlink umwandeln möchten. Dies kann ein Wort, eine Phrase, eine Schaltfläche oder ein Bild sein, auf das Benutzer klicken, um zu einer anderen Seite oder Ressource zu navigieren.

2. Schreiben Sie den HTML-Code. Um einen Hyperlink zu erstellen, verwenden Sie das HTML- Tag (auch Anker-Tag genannt). Die grundlegende Syntax sieht folgendermaßen aus:

<a href="URL">Link Text or Image</a>

. Dieses Tag definiert den Anfang des Hyperlinks.
href="URL". Das href-Attribut gibt die Ziel-URL an. Dabei kann es sich um eine Webseite, eine Datei oder einen anderen Abschnitt derselben Seite handeln. Ersetzen Sie „URL“ durch die tatsächliche Webadresse oder den Dateipfad.
Linktext oder Bild. Dies ist der Text oder das Bild, das anklickbar sein wird. Für einen Text-Hyperlink platzieren Sie hier einfach den gewünschten Text. Für einen Bild-Hyperlink platzieren Sie ein HTML-Bild-Tag ( ) innerhalb der Anker-Tags.

3. Beispiel eines Text-Hyperlinks. So erstellen Sie einen Text-Hyperlink, der Benutzer zu „http://example.com“ führt, wenn sie auf das Wort „Beispiel“ klicken:

<a href="http://example.com">Example</a>

4. Beispiel eines Bild-Hyperlinks. So erstellen Sie einen Bild-Hyperlink unter Verwendung eines Bilds unter „image.jpg“, das auf „http://example.com“ verweist:

<a href="http://example.com">

  <img src="image.jpg" alt="Description of Image">

</a>

5. Speichern und testen. Nachdem Sie Ihren HTML-Code geschrieben haben, speichern Sie die Änderungen und testen Sie den Hyperlink in einem Webbrowser. Klicken Sie auf den Link, um sicherzustellen, dass er Sie zum richtigen Ziel führt.

Zusätzliche Attribute (optional)

Ziel="_blank". Dieses Attribut öffnet den Link in einem neuen Tab oder Fenster.
Titel="Tooltip-Text". Bietet zusätzliche Informationen zum Link, wenn Benutzer mit der Maus darüber fahren.

So öffnen Sie den Link beispielsweise in einer neuen Registerkarte:

<a href="http://example.com" target="_blank">Example</a>

So verlinken Sie mit relativen URLs auf eine andere Seite derselben Site

Das Verknüpfen mit einer anderen Seite derselben Site mithilfe relativer URLs ist eine effiziente Möglichkeit, interne Hyperlinks zu erstellen, ohne die vollständige Webadresse angeben zu müssen. Eine relative URL verweist auf eine Datei oder einen Speicherort innerhalb derselben Domäne, sodass Ihre Site auch dann ordnungsgemäß funktioniert, wenn sich der Domänenname ändert. So erstellen Sie solche Links:

Verlinken auf eine Seite im selben Verzeichnis

Stellen Sie sich vor, Sie haben zwei HTML-Dateien, index.html und about.html, die sich beide im Stammverzeichnis Ihrer Site befinden. Um von index.html auf about.html zu verlinken, verwenden Sie:

<a href="about.html">About Us</a>

Verknüpfen mit einer Seite in einem übergeordneten Verzeichnis

Angenommen, Ihre aktuelle Seite befindet sich in einem Unterverzeichnis namens blog, und Sie möchten auf die Datei index.html im Stammverzeichnis verlinken. Sie würden Folgendes verwenden:

<a href="../index.html">Home</a>

Verlinken auf eine Seite in einem Unterverzeichnis

Wenn Sie von index.html im Stammverzeichnis auf post.html in einem blog Unterverzeichnis würde Ihr Link folgendermaßen aussehen:

<a href="blog/post.html">Read Blog Post</a>

So verlinken Sie auf einen bestimmten Abschnitt einer Seite

Das Verlinken auf einen bestimmten Abschnitt einer Seite, auch als „Ankerlink“ oder „Sprunglink“ bezeichnet, ist eine nützliche Möglichkeit, Benutzer zu einem bestimmten Teil einer Webseite zu leiten. Dies ist besonders hilfreich bei langen Seiten, auf denen Sie schnellen Zugriff auf bestimmte Abschnitte ermöglichen möchten. So können Sie solche Links erstellen:

Schritt 1: Identifizieren oder erstellen Sie den Zielabschnitt

Zunächst müssen Sie in dem Abschnitt der Seite, zu dem Sie verlinken möchten, einen „Anker“ identifizieren oder erstellen. Dies geschieht, indem Sie einem HTML-Element, beispielsweise einer Überschrift oder einem Absatz, zu dem der Link springen soll, ein ID-Attribut hinzufügen.

Wenn Sie beispielsweise einen Abschnitt mit der Überschrift „Kontakt“ haben, können Sie der Überschrift eine ID wie folgt hinzufügen:

<h2 id="contact">Contact Us</h2>

Schritt 2: Link zum Abschnitt erstellen

Als Nächstes erstellen Sie einen Link, der auf die ID des Zielabschnitts verweist. Dies geschieht mithilfe einer relativen URL, die das Symbol # gefolgt vom ID-Wert enthält.

Um von einer anderen Stelle auf derselben Seite auf den Abschnitt „Kontakt“ zu verlinken, würde der HTML-Code folgendermaßen aussehen:

<a href="#contact">Go to Contact Us</a>

Schritt 3: Verlinken von einer anderen Seite

Wenn Sie von einer anderen Seite derselben Site aus auf einen bestimmten Abschnitt verlinken möchten, müssen Sie sowohl die Seiten-URL als auch die ID in den Link aufnehmen. Wenn sich der Abschnitt „Kontakt“ beispielsweise auf einer Seite namens about.html befindet, würde der Link folgendermaßen aussehen:

<a href="about.html#contact">Go to Contact Us</a>

Beispiel aus der Praxis

Stellen Sie sich ein Szenario vor, in dem Sie eine Seite mit verschiedenen Abschnitten wie „Einführung“, „Dienste“ und „Kontakt“ haben. So könnten Sie sie einrichten:

<h2 id="intro">Introduction</h2>

<p>Welcome to our website...</p>

<h2 id="services">Services</h2>

<p>We offer a variety of services...</p>

<h2 id="contact">Contact Us</h2>

<p>You can reach us at...</p>

Navigationslinks

<nav>

  <ul>

    <li><a href="#intro">Introduction</a></li>

    <li><a href="#services">Services</a></li>

    <li><a href="#contact">Contact Us</a></li>

  </ul>

</nav>

So öffnen Sie einen Link in einer neuen Registerkarte

Um einen Link in einem neuen Tab zu öffnen, müssen Sie dem HTML- Tag das Zielattribut mit dem Wert _blank hinzufügen. Dadurch wird der Browser angewiesen, das verknüpfte Dokument in einem neuen Tab zu öffnen und nicht im selben Tab wie die aktuelle Seite. So können Sie das tun:

<a href="URL" target="_blank">Link Text</a>

href="URL". Dieses Attribut gibt die URL der Seite oder Ressource an, auf die Sie verlinken möchten.
Ziel="_blank". Dieses Attribut und dieser Wert weisen den Browser an, den Link in einem neuen Tab zu öffnen.