Verlinkungen in neuen Tabs mit HTML öffnen: Eine ausführliche Anleitung
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:
- No More New Tabs Extension für Chrome
- Open Links in New Tab für Firefox
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
- So fügen Sie Links in HTML ein
- Erstellen einer HTML-Datei: Eine Schritt-für-Schritt-Anleitung
- Das digitale Franchise-Imperium: Den Code für unternehmerischen Erfolg knacken
- Button-Link: Verwendung des href-Attributs
- HTML-Elemente: Bausteine des Webs und wie man sie einsetzt
- HTML-Slideshows erstellen: Eine Schritt-für-Schritt-Anleitung für Anfänger
- Link-HTML: So fügen Sie Hyperlinks in Ihre Website ein
- Die Kunst, Text in HTML zu unterstreichen: Ein Leitfaden
- Das
-Element: Strukturierung und Inhalt im HTML-Dokument - Das HTML main Tag: Der unverzichtbare Container für den Hauptinhalt deiner Webseite
- HTML-Link-Tag: Der Schlüssel zur Verknüpfung im Web
Neue Posts
World of Warcraft auf Linux spielen: Eine guide für Abenteurer
Einführung in World of Warcraft
Node.js NVM: Antworten auf die häufigsten Fragen
Entwicklung
Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen
Marketingstrategien
Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen
Sicherheit und Datenschutz
HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten
SEO-Optimierung
Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit
Online-Marketing
HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web
Einführung in HTTP-Statuscodes
Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg
SEO-Optimierung
Beschleunigen Sie die Dateneingabe mit HTML Datalist
Webentwicklung
HTML in PUG konvertieren: Einfach und schnell gemacht
Webentwicklung
Beliebte Posts
SteamCMD: Der umfassende Leitfaden zur Verwaltung von Steam-Servern
Sicherheitsrichtlinien
POST-Anfragen: Erstellen, Senden und Empfangen von Daten im Web
Webentwicklung
LaTeX: Das mächtige Werkzeug für hochwertiges Dokumentenschreiben
Dokumentenerstellung
Wiederherstellung beschädigter Linux-Dateisysteme mit fsck: Ein umfassender Leitfaden
Fehlerbehebung
Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen
Sicherheit und Datenschutz
Gigacube Admin: Zugang zu den erweiterten Einstellungen Ihres Routers
Fehlerbehebung
Linux Mint Themes: Personalisieren Sie Ihren Desktop
Open Source
TCPdump-Beispiele: Paketakquise und Netzwerkdiagnose
Fehlerbehebung
Mounten von ISO-Images unter Linux: Eine Schritt-für-Schritt-Anleitung
Anleitungen
Linux Open File: Anleitung zum Öffnen, Bearbeiten und Löschen von Dateien aus dem Terminal
Open Source