Was ist ein Hyperlink?
In der vernetzten Struktur des Internets oder in einem elektronischen Dokument sind Hyperlinks oder Links gang und gäbe.
Sie sind farbig und unterstrichen und öffnen sich automatisch, wenn Du darauf klickst.
Dabei handelt es sich um Querverweise innerhalb des Dokuments oder im Netz, die den Sprung zu einem anderen Textelement, einem PDF, einem Video, Artikel oder allgemein zu einer separaten Webressource gestatten. Der Link stellt entsprechend die benötigte Verknüpfung her und verweist als Linktext auf die URL, auf die Du als User geleitet wirst.
Den Begriff „Hyperlink“ hat der amerikanische Philosoph Ted Nelson geprägt. Es ging darum, mithilfe der HTML-Sprache das Web von „toten Links“ zu befreien und so mehr Übersicht zu ermöglichen, ohne dass störende Computersprachelemente sichtbar sind. Das gestattet der Link, der dann nur als Verweis in einem Hypertext erkennbar ist.
Wenn Du ihn benutzt, wird automatisch das darin benannte Ziel geöffnet und aufgerufen. Vergleichbar ist das mit einem normalen Buch oder Artikel, in dem bestimmte Textabschnitte mit einer Fußnote ergänzt sind. Du kannst die erweiterte Information zum gekennzeichneten Wort dann im unteren Bereich oder im Anhang finden. Ein Hyperlink hat die gleiche Aufgabe und wird im SEO-Bereich noch einmal von einem Backlink unterschieden, der Teil des Linkbuildings ist und mithilft, die Website populärer zu machen und für die Suchmaschine zu optimieren.
Wie funktioniert ein Hyperlink?
Hyperlinks sind entweder in einem Textdokument oder direkt online bei der Websuche als URLs zu finden. Die Auszeichnungssprache ist dabei immer HTML, während der Link selbst mit einem Wort oder einer Wortabfolge sichtbar ist. Die Aufgabe solcher Elemente ist das Verbinden zwischen Texten mit anderen Textbereichen oder von Websites mit anderen Ressourcen. Dabei kann es sich um eine Stelle handeln, die auf der gleichen Seite oder auf einer separaten Seite zu finden ist.
Hyperlinks sind dabei oftmals nicht als einzelne URL zu sehen, sondern innerhalb eines Textes in Form eines Worts oder Verweises farblich hervorgehoben. Sie vereinfachen auch online die Websuche erheblich, da User keine ganze URL eingeben müssen, sondern über den Link auf die gewünschte Informationsseite gelangen.
Gleiches gilt für die Aktion auf der Website selbst. Ein User, der dort einen Text vorfindet und liest, weiß genau, dass die farbigen Markierungen per Klick auf eine andere Seite oder Information führen. Oft sind Hyperlinks dann praktische Ratgeberquellen oder mithilfe von Call-To-Action dazu gedacht, den Seitenbesucher zu einer Handlung aufzufordern.
Hyperlinks in Text- und HTML-Dokumenten
Als Verlinkung im Text ist der Hyperlink praktisch und verbindet die Stelle mit einer anderen Information oder direkt mit dem Internet. Das ist auch möglich, wenn Du das Internet nicht geöffnet hast und nur das Word-Dokument aufrufst. Klickst Du auf den farblich markierten Link, öffnet sich das World Wide Web automatisch und liefert die gewünschte Information. Möglich ist auch, im Text verschiedene Textbereiche über den Hyperlink miteinander zu verknüpfen.
In HTML-Dokumenten findest Du Hyperlinks als Elemente, die mit einem a- oder link-Element ausgewiesen sind. Die Positionierung des Hyperlinks erfolgt im Inhaltsbereich body. Soll eine Verknüpfung zwischen Dokumenten und Ressourcen im Kopfbereich einer Seite stattfinden, werden diese von Webbrowsern ausgelesen oder verarbeitet.
Das a-Element steht dabei immer als Start- und End-Tag und enthält die Quelle der Verlinkung und einen zusätzlichen Linktext, der den erreichbaren Inhalt über den Hyperlink als Wort oder Satz zusammenfasst. Sichtbar im normalen Textdokument ist dann nur der Linktext und nicht mehr die Verlinkung selbst.
Wie wird ein Hyperlink geöffnet?
Ein Hyperlink lässt sich öffnen, indem Du mit der Maus über den Link fährst, um genauere Informationen zur URL und Quelle zu erhalten und auf den Link klickst. Die angezeigten Informationen werden Meta-Informationen genannt und bestehen aus einem Meta-Title und einer Meta-Description. Sie sind wichtig für den Link, damit Du, wenn Du darüber fährst, weißt, wo Du landest.
Der Link zeigt selten die vollständige Internetadresse an. Ziel des Hyperlinks ist dabei immer, dass er als Sprungmarke fungiert, um Textstellen zu verbinden, Dokumente oder Websites zu öffnen. Die Übertragung erfolgt mit HTTP und HTTPS.
Wie lässt sich ein Hyperlink erstellen und aufbauen?
Hyperlinks haben eine wichtige Bedeutung für Suchmaschinen und damit auch verschiedene Funktionen. Denn bei der Suchmaschinenoptimierung einer Webseite zählt jeder Link. Unterteilt werden sie in interne und externe Hyperlinks, während die internen Verweise auf einzelne Unterseiten der Domain führen und externe verschiedene Domains miteinander verknüpfen.
Interne Hyperlinks werden in Webprojekten als Linkstruktur bezeichnet und enthalten Klickpfade. Sie können in folgenden Strukturen erfolgen, als:
- Lineare Struktur (enthalten einen vorgegebenen Klickpfad)
- Baumstruktur (enthalten eine Gliederung der Website)
- Netzstruktur (enthalten netzförmige Strukturen für eine bessere Verbindung aller Unterseiten)
- Sternstruktur (enthalten diverse Links auf gleichwertige Websites oder Projekte)
Ein Hyperlink lässt sich mit HTML sehr einfach erstellen. Er besteht in der Praxis aus einem sichtbaren und unsichtbaren Teil, genauer aus einem angezeigten Text und einer verborgenen URL, die die Verlinkung darstellt und hinterlegt wird. Sinnvoll ist diese Form, wenn in einem Text der Lesefluss nicht ungünstig unterbrochen werden soll, wie es durch das Anzeigen der gesamten URL der Fall sein würde.
HTML-Beispiele für Links für den E-Mail-Versand:
- <a href="mailto:m.mustermann@domain.de">E-Mail schreiben</a> (Link zu einer E-Mailadresse)
- <a href="mailto:m.mustermann@domain.de,%20max.m@domain.de">E-Mail an zwei Personen schreiben</a> (Link zu zwei E-Mailadressen)
- <a href="mailto:m.mustermann@domain.de?subject=Hier%20steht%20der%20Betreff">E-Mail mit Betreff</a> (Link zu einer Email-Adresse mit Betreffzeile)
- <a href="mailto:m.mustermann@domain.de?body=Hallo%20Max,%0D%0A%0D%0Ahier%20steht%20die%20Nachricht.">E-Mail schreiben</a> (Link zu einer E-Mailadresse mit Nachricht)
Sowohl die URL als auch der Linktext werden innerhalb des a-Elements angegeben. Die URL, auf die der Link führen soll, ist in Anführungszeichen gesetzt, während der Linktext selbst ohne Anführungszeichen ausgewiesen wird. Hast Du den Hyperlink erstellt, ist dann nur der Linktext zu sehen. Die URL ist unsichtbar.
Wenn Du den Hyperlink auf Deiner Website als Beispiel verwendest, kannst Du genau festlegen, ob die gewünschte verlinkte Seite im gleichen Fenster geöffnet werden soll oder in einem neuen Fenster. Bestimmte Websites arbeiten bewusst mit sichtbaren URLs. Um so einen Link zu erstellen, wird er ohne Link- oder Anchor Text gesetzt und ist als URL dann vollständig erkennbar. Externe Hyperlinks enthalten innerhalb des a-Elements zusätzlich das Attribut "target" für die Zieladresse. Auch sie können mit oder ohne Linktext erstellt werden.
Das rel-Attribut
Das rel-Attribut im Link vermittelt eine semantische Bedeutung, um den Kontext des Links besser zu verstehen. Das Attribut wird dem Link im HTML-Code hinzugefügt. Es ist optional.
Hier Beispiele:
- <a href="http://example.com" rel="nofollow">Link</a>
Suchmaschinen wird so gesagt: hey das ist ein Werbelink, der nichts mit dem Text zu tun hat. Dies wird auch gerne verwendet, um Links in Kommentaren zu kennzeichen, welche mit dem eigentlichen Text nicht unbedingt etwas zu tun haben und auch gerne für Spam verwendet werden. - <a href="http://example.com" rel="noopener">Link</a>
Noopener dient zum Absichern von Links. Links zu anderen Webseiten, welche mit „target=_blank“ aufgerufen werden, sollten zusätzlich noch das rel-Attribut „noopener“ zugewiesen bekommen. Hintergrund ist, dass ansonsten die aufgerufene Seite über Java-Script Zugriff auf die ursprüngliche Seite bekommt und so z.B. Elemente austauschen kann. Dies kann dann beispielsweise für Phishing Attacken verwendet werden. - <a href="http://example.com" rel="noreferrer">Link</a>
Bei einem Klick wird somit die Absenderkennung (der Referrer) ünterdrückt. - <a href="http://example.com" rel="prefetch">Link</a>
Weist Browser an, das verlinkte Dokument zu cachen. - <a href="http://example.com" rel="search">Link</a>
Link zur Suchmöglichkeit für eine Webseite.