In der digitalen Welt begegnen uns ständig klickbare Elemente, die uns von einer Seite zur nächsten, von einem Dokument zum anderen führen. Diese unsichtbaren Fäden, die das Internet und viele digitale Dokumente zusammenhalten, nennen wir Hyperlinks. Sie sind das Herzstück des Webs und ermöglichen es uns, Informationen schnell und intuitiv zu vernetzen und zu navigieren.
Was genau ist ein Hyperlink?
Ein Hyperlink ist im Grunde eine Referenz in einem Dokument, die auf einen anderen Bereich desselben Dokuments oder auf ein völlig anderes Dokument verweist. Wenn Sie auf einen Hyperlink klicken – sei es Text oder ein Bild –, werden Sie automatisch zum Ziel des Links weitergeleitet. Dieses Ziel kann eine andere Webseite, eine Datei (wie ein PDF), ein bestimmter Abschnitt auf derselben Seite oder sogar eine E-Mail-Adresse sein.
Stellen Sie sich das Internet als ein riesiges, miteinander verbundenes Netzwerk vor. Hyperlinks sind die Straßen und Brücken, die die einzelnen Orte (Webseiten, Dokumente) miteinander verbinden. Ohne sie müssten Sie die Adresse jeder einzelnen Seite, die Sie besuchen möchten, manuell eingeben – ein umständlicher und ineffizienter Prozess.
Warum sind Hyperlinks so wichtig?
Die Bedeutung von Hyperlinks kann kaum überschätzt werden. Sie erfüllen mehrere entscheidende Funktionen:
- Navigation: Sie ermöglichen es Nutzern, sich innerhalb einer Website oder zwischen verschiedenen Websites frei zu bewegen.
- Vernetzung von Informationen: Sie erlauben es Autoren, verwandte Inhalte zu verknüpfen, was das Verständnis komplexer Themen erleichtert.
- Quellenangabe und Referenzierung: Sie können auf Originalquellen oder weitere Informationen verlinken, was die Glaubwürdigkeit erhöht.
- Suchmaschinenoptimierung (SEO): Links sind für Suchmaschinen ein wichtiges Kriterium, um die Relevanz und Struktur von Inhalten zu verstehen.
- Benutzerfreundlichkeit: Gut platzierte und beschriftete Links verbessern die Benutzererfahrung erheblich.
Wie fügt man Hyperlinks ein? (Allgemein)
Das Einfügen eines Hyperlinks hängt stark von der Software ab, die Sie verwenden. In vielen Textverarbeitungsprogrammen, Präsentationsprogrammen oder E-Mail-Clients ist der Prozess sehr ähnlich und intuitiv gestaltet.
Typischerweise wählen Sie zuerst den Text oder das Objekt (z.B. ein Bild) aus, das zum Hyperlink werden soll. Anschließend suchen Sie im Menü nach einer Option wie „Einfügen“ und dort nach „Link“ oder „Hyperlink“. Oft gibt es auch ein eigenes Symbol in der Symbolleiste, das wie eine Kette aussieht. Eine gängige Tastenkombination, die in vielen Programmen funktioniert (auch in Browsern für Lesezeichen), ist STRG+K (oder Befehl+K auf macOS).
Nachdem Sie die Funktion aufgerufen haben, öffnet sich ein Dialogfenster, in das Sie die Zieladresse (URL) des Links eingeben können. Sie können oft auch festlegen, ob der Link in einem neuen Fenster geöffnet werden soll oder im aktuellen Fenster. Diese einfache Methode ist ideal für Dokumente, E-Mails oder Präsentationen.
Hyperlinks in HTML-Dokumenten erstellen
Für Webseiten, die in HTML (Hypertext Markup Language) geschrieben sind, gibt es eine spezifische Syntax, um Hyperlinks zu erstellen. Wie bei allen HTML-Elementen ist die genaue Schreibweise entscheidend, damit der Link funktioniert.
Der grundlegende HTML-Tag: <a>
Der Tag, der in HTML für Hyperlinks verwendet wird, ist der <a>-Tag. Das 'a' steht hierbei für 'anchor', also Anker. Ein Anker kann entweder der Start- oder der Endpunkt eines Links sein.
Die grundlegende Struktur eines Hyperlinks in HTML sieht wie folgt aus (wir verwenden hier < und >, um die Tags darzustellen, da die echten Tags im Artikel nicht gerendert werden sollen):
<a href="ziel-adresse">Klickbarer Text oder Inhalt</a>
<a>: Dies ist das öffnende Tag für den Link.href="ziel-adresse": Dies ist ein Attribut des <a>-Tags. Das Attribut href (Hypertext Reference) ist das wichtigste Attribut für einen Link. Sein Wert (innerhalb der Anführungszeichen) gibt an, wohin der Link führen soll. Dies kann eine vollständige URL (z.B.https://www.example.com) sein, ein relativer Pfad zu einer anderen Seite auf derselben Website (z.B./ueber-uns.html) oder ein Anker innerhalb derselben Seite (z.B.#abschnitt3).Klickbarer Text oder Inhalt: Dies ist der Inhalt, der sichtbar ist und auf den der Benutzer klicken kann. Es kann Text, ein Bild oder andere HTML-Elemente sein.</a>: Dies ist das schließende Tag für den Link.
Das href-Attribut im Detail
Das href-Attribut ist das Herzstück jedes Links. Der Wert, den Sie hier eingeben, bestimmt das Ziel. Es gibt verschiedene Arten von Werten:
- Absolute URLs: Dies sind vollständige Internetadressen, die mit
http://,https://beginnen. Beispiel:href="https://www.ihre-website.de/seite.html". Diese werden verwendet, um auf Seiten auf anderen Websites zu verlinken. - Relative URLs: Diese geben den Pfad zum Ziel relativ zur aktuellen Seite an. Beispiel: Wenn Sie auf der Seite
/blog/artikel1.htmlsind und auf/blog/artikel2.htmlverlinken möchten, können Siehref="artikel2.html"verwenden, wenn sich die Dateien im selben Ordner befinden. Wenn sichartikel2.htmlim Ordner/blog/befindet und die aktuelle Seite im Stammverzeichnis liegt, wäre der Pfadhref="blog/artikel2.html". Relative Pfade sind nützlich für Links innerhalb derselben Website, da sie flexibler sind, falls die Domain geändert wird. - Anker-Links: Diese verlinken zu einem bestimmten Abschnitt auf derselben Seite oder einer anderen Seite. Das Ziel muss durch ein Element mit einem
id-Attribut markiert sein. Beispiel:href="#abschnitt-kontakt"verlinkt zu einem Element wie<h2 id="abschnitt-kontakt">Kontaktinformationen</h2>auf derselben Seite. - E-Mail-Links: Sie können Links erstellen, die das Standard-E-Mail-Programm des Benutzers öffnen. Beispiel:
href="mailto:[email protected]".
Das target-Attribut
Ein weiteres häufig verwendetes Attribut ist target. Es bestimmt, wo das Link-Ziel geöffnet werden soll.
Hier ist eine Tabelle, die die wichtigsten Werte für das target-Attribut zeigt:
| Attributwert | Beschreibung | Verhalten |
|---|---|---|
_self | Standardwert | Öffnet das Link-Ziel im selben Browserfenster/Tab, in dem der Link angeklickt wurde. |
_blank | Neues Fenster/Tab | Öffnet das Link-Ziel in einem neuen Browserfenster oder Tab. Dies ist nützlich, wenn Sie möchten, dass der Benutzer auf Ihrer Seite bleibt, während er sich externe Inhalte ansieht. |
_parent | Übergeordneter Frame | Wird in Framesets verwendet (heute selten). Öffnet das Link-Ziel im übergeordneten Frame. |
_top | Ganzes Fenster | Wird in Framesets verwendet. Öffnet das Link-Ziel im vollständigen Browserfenster, bricht alle Framesets auf. |
Für die meisten Anwendungsfälle im modernen Web sind _self (der Standardwert, der oft weggelassen wird) und _blank die relevantesten Werte.
Beispiele für HTML-Hyperlinks
Basierend auf den Aufgaben, die Sie vielleicht in einem Tutorial finden könnten, hier einige Beispiele, wie die HTML-Syntax aussehen würde:
Stellen Sie sich vor, Sie haben einen Satz wie: "Mehr Informationen finden Sie in unserem Artikel über London." Ursprünglich war vielleicht nur das Wort "London" verlinkt.
Die ursprüngliche HTML-Struktur könnte so aussehen:
<p>Mehr Informationen finden Sie in unserem Artikel über <a href="/artikel/london.html">London</a>.</p>
Wenn Sie nun den Text des Hyperlinks in "der Charing Cross Road" ändern möchten, müssten Sie den Text zwischen dem öffnenden <a> und dem schließenden </a> Tag anpassen:
<p>Mehr Informationen finden Sie in unserem Artikel über <a href="/artikel/london.html">der Charing Cross Road</a>.</p>
Das Ziel des Links (das href-Attribut) bleibt hierbei unverändert; nur der sichtbare Text ändert sich.
Eine weitere Aufgabe war, einen Absatz hinzuzufügen, der besagt, dass man sich bei Wikipedia über die Winkelgasse informieren kann, und das Wort "Wikipedia" zu verlinken.
Dazu fügen Sie einen neuen Absatz (mit dem <p>-Tag) hinzu und erstellen innerhalb dieses Absatzes einen Hyperlink für das Wort "Wikipedia":
<p>Sie können sich bei <a href="http://www.wikipedia.de">Wikipedia</a> über die Winkelgasse informieren.</p>
In diesem Beispiel ist das Wort "Wikipedia" der klickbare Text, und das Ziel des Links ist die URL http://www.wikipedia.de, angegeben im href-Attribut.
Wichtigkeit der korrekten HTML-Syntax
Wie bei allen anderen HTML-Elementen ist die genaue Syntax bei Hyperlinks entscheidend. Ein vergessener Anführungsstrich, ein Tippfehler im Attributnamen (z.B. herf statt href) oder ein fehlendes schließendes </a>-Tag können dazu führen, dass der Link nicht funktioniert oder die gesamte Seite fehlerhaft angezeigt wird.
Validatoren können helfen, Syntaxfehler zu finden, aber eine sorgfältige Überprüfung des Codes ist immer ratsam.
Häufig gestellte Fragen zu Hyperlinks
Was ist der Unterschied zwischen einem absoluten und einem relativen Link?
Ein absoluter Link enthält die vollständige Webadresse (URL), beginnend mit http oder https. Er funktioniert unabhängig davon, von welcher Seite aus er aufgerufen wird. Ein relativer Link gibt den Pfad zum Ziel relativ zur aktuellen Seite an und wird hauptsächlich für Verlinkungen innerhalb derselben Website verwendet.
Mein Link funktioniert nicht. Was könnte das Problem sein?
Häufige Gründe sind Tippfehler in der URL oder im Dateipfad im href-Attribut, fehlende Anführungszeichen um den Attributwert, ein falsch geschriebenes Attribut (z.B. "hreff" statt "href"), oder ein fehlendes schließendes </a>-Tag. Überprüfen Sie die genaue Syntax und stellen Sie sicher, dass die Zieladresse korrekt ist.
Wie lasse ich einen Link in einem neuen Tab oder Fenster öffnen?
Verwenden Sie das target-Attribut mit dem Wert _blank im <a>-Tag. Beispiel: <a href="http://externes-ziel.com" target="_blank">Zum externen Inhalt</a>.
Kann ich Bilder verlinken?
Ja, Sie können ein Bild zum klickbaren Hyperlink machen, indem Sie das <img>-Tag innerhalb des <a>-Tags platzieren. Beispiel: <a href="/seite-mit-bildinfos.html"><img src="bild.jpg" alt="Beschreibung des Bildes"></a>.
Was hat es mit dem "Link-Symbol" in Photoshop auf sich?
Die Information über das "Link-Symbol" in Photoshop bezieht sich auf das Verknüpfen von Ebenen (Layers) innerhalb des Bildbearbeitungsprogramms. Dies ist ein internes Feature von Photoshop, um die Bearbeitung mehrerer Ebenen zu synchronisieren (z.B. Verschieben, Transformieren). Es hat nichts mit dem Erstellen von Hyperlinks zu tun, die von einem Dokument zu einem anderen im Web oder auf dem Computer führen. Die Konzepte der Verknüpfung sind hier völlig unterschiedlich.
Sollte ich immer _blank verwenden, um Links in einem neuen Tab zu öffnen?
Nicht unbedingt. Es ist eine Frage der Benutzererfahrung. Für interne Links innerhalb derselben Website ist es oft besser, den Standardwert (_self) zu verwenden, damit der Benutzer nicht zu viele Tabs öffnet. Für externe Links zu anderen Websites kann _blank sinnvoll sein, um den Benutzer auf Ihrer eigenen Seite zu halten, aber es sollte sparsam und überlegt eingesetzt werden, da es auch als störend empfunden werden kann.
Fazit
Hyperlinks sind fundamentale Bausteine der digitalen Welt. Egal ob Sie ein einfaches Dokument erstellen oder komplexe Webseiten entwickeln, das Verständnis dafür, wie Hyperlinks funktionieren und wie man sie korrekt einfügt, ist unerlässlich. In vielen Anwendungen ist es so einfach wie das Auswählen von Text und das Drücken von STRG+K, während in HTML eine spezifische Syntax mit dem <a>-Tag und Attributen wie href und target verwendet wird.
Mit der Fähigkeit, Inhalte miteinander zu verknüpfen, können Sie Informationen organisieren, Quellen referenzieren und Ihren Nutzern eine intuitive Navigation ermöglichen. Meistern Sie die Kunst des Verlinkens, und Sie machen Ihre digitalen Inhalte zugänglicher und leistungsfähiger.
Hat dich der Artikel Hyperlinks: Einfach erstellen & verstehen interessiert? Schau auch in die Kategorie Ogólny rein – dort findest du mehr ähnliche Inhalte!