So erstellst du HTML-Links, die in einem neuen Tab geöffnet werden

Vorteile von HTML-Links, die in einem neuen Tab geöffnet werden

HTML-Links, die in einem neuen Tab geöffnet werden, bieten dir zahlreiche Vorteile, die deine Benutzerfreundlichkeit verbessern und die Erfahrung deiner Website aufwerten. Hier sind einige der wichtigsten Vorteile:

Verbesserte Benutzererfahrung

Wenn du Links in einem neuen Tab öffnest, ermöglichst du es deinen Besuchern, deine Website zu durchsuchen, ohne ihre aktuelle Seite zu verlassen. Dies bietet eine reibungslose und unterbrechungsfreie Benutzererfahrung und ermöglicht es ihnen, mehrere Seiten gleichzeitig zu erkunden.

Beibehaltung der Kontextualität

Durch das Öffnen von Links in neuen Tabs bleibt der ursprüngliche Kontext der aktuellen Seite erhalten. Deine Besucher können mühelos zu deiner Hauptseite zurückkehren, ohne sich durch verschiedene Seiten zurückklicken zu müssen. Dies verbessert die Navigation und hilft deinen Besuchern, sich auf deiner Website zu orientieren.

Reduzierung der Absprungrate

Wenn Links auf derselben Seite geöffnet werden, kann dies zu einer erhöhten Absprungrate führen, da die Besucher deine Website verlassen, um andere Seiten zu besuchen. Durch das Öffnen von Links in neuen Tabs kannst du die Absprungrate verringern und die Verweildauer auf deiner Website erhöhen.

Erhöhte Effizienz

Das Öffnen von Links in neuen Tabs ermöglicht es deinen Besuchern, mehrere Seiten gleichzeitig zu durchsuchen, was ihre Produktivität und Effizienz steigert. Sie können Recherchen durchführen, Artikel lesen oder Produkte vergleichen, ohne den aktuellen Tab verlassen zu müssen.

Syntax und Attribute für Links in neuen Tabs

HTML-Syntax

Um einen Link zu erstellen, der in einem neuen Tab geöffnet wird, verwendest du das folgende HTML-Markup:

Für nähere Informationen besuche: HTML target Attribut: Eine umfassende Anleitung

<a href="URL" target="_blank">Linktext</a>

Hierbei ersetzt du "URL" durch die Adresse der Seite, die du öffnen möchtest, und "Linktext" durch den Text, der im Link angezeigt werden soll.

Attribute

Das target-Attribut ist für die Steuerung des Verhaltens von Links von entscheidender Bedeutung. Hier sind die relevanten Werte:

• blank: Öffnet den Link in einem neuen, nicht verwandten Tab.
• self: Öffnet den Link im selben Tab oder Fenster.
• parent: Öffnet den Link im übergeordneten Fenster.
• top: Öffnet den Link im obersten Fenster.

Weitere Attribute

Zusätzlich zum target-Attribut kannst du auch folgende Attribute verwenden, um das Verhalten von Links in neuen Tabs weiter anzupassen:

• rel="noopener noreferrer": Verbessert die Sicherheit, indem verhindert wird, dass der Linkeröffner auf die Browsereinstellungen zugreift.
• aria-label: Ermöglicht es dir, alternative Textbeschreibungen für Links für Barrierefreiheitszwecke hinzuzufügen.

Beispiel

Hier ist ein Beispiel für einen HTML-Link, der in einem neuen Tab geöffnet wird:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Besuche unsere Website</a>

Wenn ein Benutzer auf diesen Link klickt, wird die Website example.com in einem neuen Tab geöffnet.

Optionen zur Anpassung von Links in neuen Tabs

Nachdem du nun die Grundlagen für das Erstellen von Links in neuen Tabs kennst, kannst du diese mit verschiedenen Attributen an deine Bedürfnisse anpassen.

Titel festlegen

Mit dem Attribut title kannst du einen Tooltip-Text festlegen, der angezeigt wird, wenn du den Mauszeiger über den Link bewegst. Dies kann hilfreich sein, um zusätzliche Informationen zu geben, ohne den Text des Links zu überladen.

Mehr dazu in diesem Artikel: HTML-Entities: Ersetzen von Sonderzeichen im Web

<a href="example.com" target="_blank" title="Öffnet eine neue Registerkarte mit Beispielwebsite">Beispielwebsite</a>

Link-Aussehen anpassen

Das Attribut style ermöglicht es dir, das Aussehen des Links anzupassen, z. B. Farbe, Schriftart oder Rand. Verwende Inline-CSS, um die gewünschte Formatierung anzugeben.

<a href="example.com" target="_blank" style="color: red; font-weight: bold;">Beispielwebsite</a>

Rel-Attribut verwenden

Das Attribut rel ist ein mächtiges Werkzeug, mit dem du die Beziehung zwischen dem aktuellen Dokument und dem verlinkten Dokument angeben kannst. Im Kontext von Links in neuen Tabs kannst du Folgendes verwenden:

• noopener: Verhindert, dass das Skript im neuen Tab auf das ursprüngliche Browserfenster zugreifen kann, was die Sicherheit verbessern kann.
• noreferrer: Entfernt den Referrer aus der HTTP-Anfrage, was die Privatsphäre verbessern kann.

<a href="example.com" target="_blank" rel="noopener noreferrer">Beispielwebsite</a>

Weitere Optionen

Abhängig von deinem Browser stehen möglicherweise weitere Anpassungsoptionen zur Verfügung, beispielsweise:

• data-target: Legt ein bestimmtes Element oder einen bestimmten Bereich fest, der in einem neuen Tab geöffnet werden soll.
• data-placement: Bestimmt die Position des neuen Tabs (z. B. oben, unten, links oder rechts neben dem aktuellen Tab).

Denke daran, die Kompatibilität der verwendeten Anpassungen in verschiedenen Browsern zu testen.

Kompatibilität von Links in neuen Tabs in verschiedenen Browsern

HTML-Links, die in einem neuen Tab geöffnet werden, werden von allen modernen Browsern unterstützt, unterliegen jedoch einigen Kompatibilitätsproblemen:

Browserunterstützung

Chrome, Firefox und Edge

Diese Browser unterstützen Links in neuen Tabs vollständig und bieten umfassende Anpassungsoptionen.

Safari

Safari unterstützt Links in neuen Tabs mit Einschränkungen. Es öffnet Links, die mit <a target="_blank"> versehen sind, in einem neuen Hintergrund-Tab. Die Option rel="noopener" wird jedoch nicht unterstützt.

Siehe auch: Das <main>-Element: Strukturierung und Inhalt im HTML-Dokument

Internet Explorer 11 und davor

Links in neuen Tabs werden von Internet Explorer 11 und früheren Versionen nicht unterstützt.

Kompatibilitätsprobleme

Pop-up-Blocker

Einige Browser verfügen über integrierte Pop-up-Blocker, die Links in neuen Tabs blockieren können. Um dieses Problem zu beheben, deaktivierst du den Pop-up-Blocker entweder oder fügst den Zielserver zu einer Ausnahmeliste hinzu.

Zielmanipulation

Böswillige Websites können das Zielattribut von Links manipulieren, um sie in einem neuen Tab zu öffnen und Benutzer auf schädliche Websites umzuleiten. Um dies zu verhindern, filterst du eingehende Links und validierst das Zielattribut auf Sicherheit.

Zusätzliche Hinweise

rel="noopener" und rel="noreferrer"

Diese Attribute verbessern die Sicherheit von Links in neuen Tabs, indem sie die Weitergabe von Cookies und Referrer-Informationen an den Zielserver verhindern. Diese Attribute werden von allen modernen Browsern unterstützt.

A11y (Barrierefreiheit)

Links in neuen Tabs sollten mit entsprechenden ARIA-Rollen und Textbeschriftungen versehen werden, um ihre Funktion für Benutzer mit eingeschränkten Fähigkeiten zugänglich zu machen.

Fehlerbehebung: Warum öffnet sich der Link nicht in einem neuen Tab?

Überprüfe die Syntax

Stelle sicher, dass du die richtige Syntax verwendest. Der target="_blank"-Attribut muss innerhalb des <a>-Tags stehen, wie folgt:

<a href="https://www.example.com" target="_blank">Linktext</a>

Überprüfe die Browserkompatibilität

Nicht alle Browser unterstützen das target="_blank"-Attribut. Überprüfe, ob du den neuesten Browser verwendest und ob dieser das Attribut unterstützt.

Weiterführende Informationen gibt es bei: HTML <span>-Tag: Eine umfassende Anleitung zur Markierung von Textinhalten

Überprüfe das TARGET-Meta-Tag

Einige Websites können das TARGET-Meta-Tag verwenden, um zu steuern, wie Links geöffnet werden. Dieses Tag überschreibt die target="_blank"-Attribute der Links. Überprüfe den Quellcode der Seite, um zu sehen, ob das TARGET-Meta-Tag vorhanden ist und ändere es gegebenenfalls.

Überprüfe Pop-up-Blocker

Möglicherweise hast du einen Pop-up-Blocker aktiviert, der das Öffnen des Links in einem neuen Tab verhindert. Deaktiviere den Pop-up-Blocker und versuche es erneut.

Überprüfe eventuelle Fehler

Stelle sicher, dass es keine Fehler im HTML-Code gibt, die das Öffnen des Links in einem neuen Tab verhindern könnten. Überprüfe die HTML-Syntax und den Linkpfad auf Fehler.

Überprüfe die Ziel-URL

Überprüfe, ob die Ziel-URL korrekt ist und ob die Website verfügbar ist. Wenn die Ziel-URL falsch oder die Website nicht erreichbar ist, öffnet sich der Link nicht in einem neuen Tab.

Verwende JavaScript

Wenn du Probleme bei der Verwendung des target="_blank"-Attributs hast, kannst du stattdessen JavaScript verwenden, um den Link in einem neuen Tab zu öffnen. Hier ist ein Beispiel:

Mehr Informationen findest du hier: Das HTML-Element „sub“: Alles, was Sie wissen müssen

document.querySelector('a').addEventListener('click', function() {
  window.open(this.href, '_blank');
});

Best Practices für die Verwendung von Links in neuen Tabs

Um das Erlebnis für deine Nutzer zu optimieren, solltest du die folgenden Best Practices beim Erstellen von HTML-Links, die in einem neuen Tab geöffnet werden, befolgen:

h3 Verwende beschreibende Ankertexte

Der Ankertext, d. h. der anklickbare Text, sollte eine klare Vorstellung davon vermitteln, wohin der Link führt. Vermeide vage Ausdrücke wie "Hier klicken" oder "Mehr erfahren".

h3 Berücksichtige die Benutzerfreundlichkeit

Das Öffnen eines Links in einem neuen Tab sollte die Benutzerfreundlichkeit nicht beeinträchtigen. Stelle sicher, dass der neue Tab ausreichend groß ist und die Schaltfläche zum Schließen leicht zu finden ist.

h3 Vermeide übermäßige Verwendung

Verwende Links in neuen Tabs nur dann, wenn es unbedingt notwendig ist. Das Öffnen zu vieler Tabs kann zu einer überladenen Benutzeroberfläche führen und die Navigation erschweren.

h3 Verwende rel="noopener"{target="_blank"} mit Vorsicht

Das Attribut rel="noopener" wurde eingeführt, um Sicherheitslücken zu schließen. Es verhindert, dass der neue Tab vom ursprünglichen Fenster aus auf Ressourcen zugreifen kann. Allerdings kann dies auch zu Kompatibilitätsproblemen mit einigen Funktionen führen, z. B. der Möglichkeit, den neuen Tab über JavaScript zu steuern. Verwende rel="noopener" daher nur, wenn es unbedingt erforderlich ist.

h3 Teste die Kompatibilität

Stelle sicher, dass deine Links in neuen Tabs in allen gängigen Browsern ordnungsgemäß funktionieren. Dies kannst du durch manuelles Testen oder durch den Einsatz von Tools zur automatisierten Browsertestung wie BrowserStack or Selenium erledigen.

Mehr dazu in diesem Artikel: Das Placeholder-Attribut in HTML: Nutzen und Best Practices

Alternativen zu Links in neuen Tabs

Obwohl Links in neuen Tabs eine bequeme Möglichkeit sind, Benutzer auf externe Inhalte umzuleiten, gibt es auch einige Alternativen, die du in Betracht ziehen kannst:

Modale Fenster

Modale Fenster sind Popup-Fenster, die über dem aktuellen Inhalt deiner Website angezeigt werden. Sie können verwendet werden, um Informationen anzuzeigen, ohne den Benutzer auf eine neue Seite zu leiten. Modale Fenster können besonders hilfreich sein, wenn du Inhalte hervorheben möchtest, ohne den Benutzerfluss zu unterbrechen.

Inline-Frames (IFrames)

IFrames sind HTML-Elemente, mit denen du Inhalte von anderen Websites in deine eigene Website einbetten kannst. Auf diese Weise können Benutzer auf externe Inhalte zugreifen, ohne deine Website verlassen zu müssen. IFrames können jedoch auch Sicherheitsbedenken mit sich bringen, da sie es externen Websites ermöglichen, auf deinen Inhalt zuzugreifen.

Externe Links mit Anker

Anstatt einen Link in einem neuen Tab zu öffnen, kannst du auch einen externen Link mit einem Anker verwenden, der zu einem bestimmten Bereich auf einer anderen Website führt. Dies kann hilfreich sein, wenn du auf bestimmte Inhalte auf einer anderen Website verweisen möchtest, ohne den Benutzer auf eine neue Seite zu leiten.

Drittanbieter-Plugins

Es gibt auch eine Vielzahl von Drittanbieter-Plugins, die du verwenden kannst, um die Funktionalität deiner Links zu erweitern. Diese Plugins können Funktionen wie das Öffnen von Links in neuen Tabs, das Nachverfolgen von Klicks und die Anpassung des Erscheinungsbilds deiner Links bieten.

Benutzerdefinierte JavaScript-Lösungen

Wenn keine der oben genannten Alternativen deinen Anforderungen entspricht, kannst du auch eine benutzerdefinierte JavaScript-Lösung erstellen, um Links in einem neuen Tab zu öffnen. Dies erfordert jedoch fortgeschrittenere Programmierkenntnisse.

Siehe auch: Anchor-Tags in HTML: So erstellst du Hyperlinks

Verwandte Artikel

• Das
• HTML-Code: Grundlagen für Webentwickler
• Link-HTML: So fügen Sie Hyperlinks in Ihre Website ein
• Die Bedeutung von : Der Ankerpunkt im HTML-Code
• HTML-Aufzählungen: Eine unverzichtbare Anleitung zur korrekten Verwendung
• Index.html: Alles, was Sie über die Homepage Ihrer Website wissen müssen
• Das

  -Tag in HTML: Ein Leitfaden zur richtigen Strukturierung von Absätzen

• HTML-Grundlagen: Alles, was Webentwickler wissen müssen
• Das HTML-Element
  : Struktur und Verwendung
• Deaktivieren und Deaktivieren von Links im HTML

Folge uns

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