WMP Sites

Verlinkungen in neuen Tabs mit HTML öffnen: Eine ausführliche Anleitung

Lukas Fuchs vor 7 Monaten in  Webentwicklung 3 Minuten Lesedauer

Attribute zum Öffnen von Links in neuen Tabs

Um Links in neuen Tabs öffnen zu lassen, musst du das HTML-Attribut target verwenden. Dieses Attribut weist den Browser an, den Link in einem neuen Fenster oder Tab zu öffnen.

target="_blank"

Der Wert "_blank" öffnet den Link immer in einem neuen Tab, unabhängig von den Browsereinstellungen. Dies ist die gebräuchlichste Methode zum Öffnen von Links in neuen Tabs.

Beispiel:

<a href="https://www.beispiel.com" target="_blank">Beispiel-Link</a>

target="_parent"

Der Wert "_parent" öffnet den Link im selben Fenster oder Tab wie die Quellseite. Dies ist nützlich, wenn du einen Link zu einer anderen Seite auf derselben Domain öffnen willst.

Beispiel:

<a href="/about-us" target="_parent">Über uns</a>

target="_self"

Der Wert "_self" öffnet den Link im selben Fenster oder Tab wie die Quellseite. Dies ist die Standardeinstellung für Links und wird verwendet, wenn kein target-Attribut angegeben wird.

Beispiel:

<a href="https://www.beispiel.com">Beispiel-Link</a>

HTML-Syntax für das Öffnen von Links in neuen Tabs

Um einen Link in einem neuen Tab zu öffnen, musst du das target-Attribut verwenden. Dieses Attribut kann den Wert _blank annehmen. Hier ist die grundlegende Syntax:

<a href="url" target="_blank">Link-Text</a>

Verwendung des target-Attributs

Das target-Attribut weist den Browser an, den Link in einem neuen Tab oder Fenster zu öffnen. Es gibt zwei mögliche Werte für dieses Attribut:

Zusätzliche Details erhältst du bei: HTML bearbeiten: Schritt-für-Schritt-Anleitung für Anfänger

  • _blank: Dies öffnet den Link immer in einem neuen Tab.
  • _self: Dies öffnet den Link im selben Tab oder Fenster.

Wenn du das target-Attribut nicht angibst, öffnet der Browser den Link standardmäßig im selben Tab oder Fenster.

Kompatibilität mit verschiedenen Browsern

Das target-Attribut wird von allen gängigen Browsern unterstützt, darunter:

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Apple Safari

Einige ältere Browser unterstützen das target-Attribut möglicherweise nicht. Du kannst jedoch JavaScript verwenden, um dieses Verhalten in älteren Browsern nachzubilden.

Vorteile der Verwendung von neuen Tabs für externe Links

Das Öffnen von externen Links in neuen Tabs bietet folgende Vorteile:

  • Es hält dich auf derselben Seite.
  • Es verhindert, dass Benutzer versehentlich von deiner Website weg navigieren.
  • Es verbessert die Benutzererfahrung.

Kompatibilität mit verschiedenen Browsern

Das target-Attribut, das zum Öffnen von Links in neuen Tabs verwendet wird, wird von allen gängigen Browsern unterstützt, darunter:

Beliebte Browser

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Apple Safari
  • Opera

Ältere Browser

In älteren Browsern wie Internet Explorer 8 und früher wird das target-Attribut möglicherweise nicht unterstützt. In diesen Browsern werden Links stattdessen im selben Tab geöffnet.

Überlegungen zur Kompatibilität

Browserversionen:

Die Kompatibilität kann zwischen verschiedenen Browserversionen variieren. Vergewissere dich, dass du die neueste Version deines Browsers verwendest, um die bestmögliche Unterstützung für das target-Attribut zu gewährleisten.

Zusätzliche Details erhältst du bei: Die Bedeutung der HTML-Breite: So steuern Sie die Größe von Elementen auf Ihrer Website

Deaktivierte Browserfunktionen:

Einige Benutzer deaktivieren möglicherweise Funktionen in ihren Browsern, die das Öffnen von Links in neuen Tabs verhindern können, wie z. B. Popup-Blocker. Bitte deine Nutzer, diese Funktionen zu deaktivieren, wenn sie Probleme beim Öffnen von Links in neuen Tabs haben.

Skripte von Drittanbietern:

Skripte von Drittanbietern, die auf deiner Website ausgeführt werden, können die Kompatibilität mit dem target-Attribut beeinträchtigen. Überprüfe deine Website auf solche Skripte und deaktiviere sie, wenn sie Probleme verursachen.

Vorteile der Verwendung von neuen Tabs für externe Links

Wenn du externe Links in neuen Tabs öffnest, bietet dies einige bedeutende Vorteile:

Verbesserte Benutzererfahrung

  • Kontext beibehalten: Indem der aktuelle Tab geöffnet bleibt, kannst du einfach zum vorherigen Inhalt zurückkehren, ohne deine aktuelle Sitzung zu unterbrechen.
  • Weniger ablenkend: Das Öffnen von externen Links in neuen Tabs verhindert, dass sich dein aktueller Tab mit irreführendem Inhalt füllt. Dies führt zu einer weniger ablenkenden und konzentrierteren Benutzererfahrung.

Suchmaschinenoptimierung (SEO)

  • Vorrangiges Crawling: Suchmaschinen wie Google priorisieren Websites, die eine gute Benutzererfahrung bieten. Das Öffnen von externen Links in neuen Tabs verbessert die Benutzerfreundlichkeit und kann die Sichtbarkeit deiner Website in den Suchergebnissen erhöhen.
  • Vermeidung von Absprungraten: Wenn du externe Links in neuen Tabs öffnest, verringert sich die Wahrscheinlichkeit, dass Benutzer deine Website sofort wieder verlassen (abspringen). Eine geringere Absprungrate ist für die SEO-Leistung von Vorteil.

Sicherheit

  • Schutz vor Malware: Das Öffnen externer Links in neuen Tabs trennt die Sitzung von deiner Hauptwebsite und verringert so das Risiko, dass Malware auf deine Website gelangt.
  • Datenschutz: Einige Websites verwenden Tracking-Methoden, die verfolgen, von welcher Website du gekommen bist. Das Öffnen externer Links in neuen Tabs schützt deine Privatsphäre, da diese Informationen nicht an die Zielwebsite weitergegeben werden.

Nachteile der Verwendung von neuen Tabs für interne Links

Während das Öffnen interner Links in neuen Tabs einige Vorteile bietet, gibt es auch einige potenzielle Nachteile, die du berücksichtigen solltest:

Störung des Nutzererlebnisses

Wenn ein interner Link in einem neuen Tab geöffnet wird, muss der Nutzer seine aktuelle Seite verlassen. Dies kann besonders störend sein, wenn der Nutzer mitten in der Lektüre eines Artikels oder der Durchführung einer Aufgabe ist. Der Wechsel zwischen mehreren Tabs kann auch die Kognition beeinträchtigen und es dem Nutzer erschweren, sich auf den aktuellen Inhalt zu konzentrieren.

Erhöhte Ladezeiten

Das Öffnen neuer Tabs stellt zusätzliche Belastung für den Browser dar, da der Browser den neuen Tab laden und rendern muss. Dies kann zu längeren Ladezeiten führen, insbesondere auf langsameren Geräten oder bei instabilen Internetverbindungen.

Weitere Einzelheiten findest du in: HTML für Anfänger: Die Grundlagen erlernen

Verringertes Engagement

Wenn Nutzer mehrere Tabs gleichzeitig geöffnet haben, kann es schwieriger für dich sein, ihr Engagement zu gewinnen. Sie wechseln möglicherweise zwischen den Tabs hin und her, was ihre Aufmerksamkeit von deiner primären Website ablenkt. Dies kann die Verweildauer auf deiner Website verringern und die Wahrscheinlichkeit erhöhen, dass Nutzer deine Website verlassen.

Suchmaschinenoptimierung (SEO)

Suchmaschinen sehen es nicht gerne, wenn Websites übermäßige Weiterleitungen verwenden. Aus diesem Grund kann die Verwendung neuer Tabs für interne Links deine SEO-Bemühungen beeinträchtigen. Wenn ein Nutzer auf einen internen Link klickt, sollte er auf der gleichen Domain bleiben. Wenn der Link jedoch in einem neuen Tab geöffnet wird, wird der Nutzer auf eine neue URL geleitet, was für Suchmaschinen verwirrend sein kann.

Alternativen

Wenn du die oben genannten Nachteile vermeiden möchtest, stehen dir mehrere Alternativen zum Öffnen interner Links in neuen Tabs zur Verfügung:

  • Lightboxen: Lightboxen sind modale Fenster, die über der aktuellen Seite erscheinen. Sie können verwendet werden, um weitere Informationen oder Formulare anzuzeigen, ohne den Nutzer auf eine neue Seite weiterzuleiten.
  • Aktien-Dialoge: Aktien-Dialoge ermöglichen es Nutzern, Inhalte schnell und einfach auf Social-Media-Plattformen zu teilen. Sie können in deine Website integriert werden, ohne neue Tabs zu öffnen.
  • Popover: Popover sind kleine Informationsfenster, die angezeigt werden, wenn ein Nutzer mit dem Mauszeiger über einen Link oder ein Element fährt. Sie können verwendet werden, um zusätzliche Informationen bereitzustellen, ohne die aktuelle Seite zu verlassen.

Best Practices für das Öffnen von Links in neuen Tabs

Beim Öffnen von Links in neuen Tabs solltest du dich an einigen bewährten Praktiken orientieren, um die Benutzerfreundlichkeit und Zugänglichkeit zu gewährleisten.

Bedenke die Benutzererwartungen

Überlege, was Nutzer erwarten, wenn sie auf einen Link klicken. Wenn es sich um einen externen Link handelt, erwarten sie in der Regel, dass dieser in einem neuen Tab geöffnet wird. Bei internen Links hingegen bevorzugen sie möglicherweise, auf derselben Seite zu bleiben.

Markiere externe Links deutlich

Verwende unterschiedliche Farben, Symbole oder Textformatierungen, um externe Links kenntlich zu machen. So können Nutzer leicht erkennen, dass sie eine andere Website besuchen werden.

Weitere Einzelheiten findest du in: HTML <dd>: Definitionen und ihre Verwendung

Verwende beschreibende Antexte

Verwende für Links aussagekräftige Antexte, die den Zielinhalt klar beschreiben. Dadurch können Nutzer fundierte Entscheidungen darüber treffen, ob sie den Link öffnen möchten oder nicht.

Vermeide Links, die keine neuen Tabs öffnen

Wenn du externe Links öffnest, stelle sicher, dass du immer das target="_blank"-Attribut verwendest. Andernfalls könnte die Website in demselben Tab geladen werden und den Nutzer verwirren.

Beachte die Barrierefreiheit

Stelle sicher, dass Links für Nutzer mit eingeschränkter Mobilität zugänglich sind. Kennzeichne Links mit aria-label-Attributen und gib ihnen beschreibende Namen.

Optimiere für mobile Geräte

Da immer mehr Nutzer auf mobilen Geräten surfen, ist es wichtig, sicherzustellen, dass sich Links in neuen Tabs optimal auf kleinen Bildschirmen öffnen. Verwende zum Beispiel responsive Design, um sicherzustellen, dass die Links leicht zu sehen und zu klicken sind.

Alternative Methoden zum Öffnen von Links in neuen Tabs

Neben dem HTML-Attribut target="_blank" gibt es noch weitere Methoden, um Links in neuen Tabs zu öffnen.

JavaScript

Mit JavaScript kannst du Links dynamisch in neuen Tabs öffnen. Der folgende Code fügt einem Link mit der ID "myLink" ein "Click"-Event hinzu, das den Link in einem neuen Tab öffnet:

Für nähere Informationen besuche: HTML-Audio-Autoplay: Ein umfassender Leitfaden zur automatischen Audiowiedergabe

document.getElementById("myLink").addEventListener("click", function() {
  window.open(this.href, "_blank");
});

Kontextmenü

Die meisten Browser bieten im Kontextmenü eine Option zum Öffnen eines Links in einem neuen Tab. Klicke dazu mit der rechten Maustaste auf den Link und wähle die Option "In neuem Tab öffnen" oder "Link in neuem Tab öffnen".

Browsererweiterungen

Es gibt Browsererweiterungen, die das Öffnen von Links in neuen Tabs automatisieren. Diese Erweiterungen fügen dem Browser eine Schaltfläche oder ein Tastaturkürzel hinzu, mit denen du Links im Handumdrehen in neuen Tabs öffnen kannst.

Empfohlene Erweiterungen:

Tastaturkürzel

Einige Browser unterstützen Tastaturkürzel zum Öffnen von Links in neuen Tabs. Die gängigsten Kürzel sind:

  • Windows und Linux: Strg + Klick
  • macOS: Befehl + Klick

Fehlersuche bei Problemen beim Öffnen von Links in neuen Tabs

Wenn du Probleme hast, Links in neuen Tabs zu öffnen, kannst du die folgenden Schritte zur Fehlerbehebung durchführen:

Überprüfe das target-Attribut

Stelle sicher, dass das target-Attribut im HTML-Code korrekt auf "_blank" gesetzt ist. Wenn es auf etwas anderes als "_blank" gesetzt ist, wird der Link möglicherweise nicht in einem neuen Tab geöffnet.

Weitere Informationen findest du unter: Einen Link in einem neuen Tab öffnen: Einfache Anleitung für HTML

Überprüfe die Browserkompatibilität

Einige ältere Browser unterstützen möglicherweise nicht das target-Attribut. Wenn du einen älteren Browser verwendest, musst du möglicherweise eine alternative Methode verwenden, um Links in neuen Tabs zu öffnen (siehe Abschnitt Alternative Methoden zum Öffnen von Links in neuen Tabs).

Überprüfe die Blockierung von Pop-ups

Einige Browser blockieren möglicherweise Pop-ups, einschließlich Links, die in neuen Tabs geöffnet werden. Überprüfe deine Browsereinstellungen und deaktiviere ggf. die Blockierung von Pop-ups.

Überprüfe JavaScript-Fehler

Wenn du JavaScript verwendest, um Links in neuen Tabs zu öffnen, prüfe, ob es JavaScript-Fehler gibt, die das Öffnen der Links verhindern könnten. Verwende die Konsole deines Browsers, um JavaScript-Fehler anzuzeigen.

Überprüfe den Cache und die Cookies

Manchmal können der Cache und die Cookies des Browsers Probleme beim Öffnen von Links in neuen Tabs verursachen. Versuche, den Cache und die Cookies deines Browsers zu löschen und es erneut zu versuchen.

Andere Faktoren

Wenn keiner der oben genannten Schritte zur Fehlerbehebung funktioniert, überprüfe Folgendes:

  • Drittanbieter-Add-ons: Deaktiviere alle installierten Drittanbieter-Add-ons und prüfe, ob dadurch das Problem behoben wird.
  • Firewall-Einstellungen: Überprüfe deine Firewall-Einstellungen und stelle sicher, dass sie das Öffnen von Links in neuen Tabs nicht blockieren.
  • Probleme mit dem Website-Design: Wenn du die Website selbst verwaltest, überprüfe, ob es Probleme mit dem Website-Design gibt, die das Öffnen von Links in neuen Tabs verhindern könnten.

Verwandte Artikel

Folge uns

Neue Posts

Beliebte Posts