Ausführbare HTML-Docs: Link in neuem Tab

Q: Wie öffne ich einen Link in HTML in einem neuen Tab?

Füg dem -Tag target="blank" hinzu: Example . Der Browser öffnet die Seite in einem neuen Tab und lässt die aktuelle Seite offen.

Q: Brauche ich bei target="_blank" noch rel="noopener"?

Aktuelle Versionen von Chrome, Firefox und Safari wenden noopener automatisch auf Links mit target="_blank" an, die neue Seite kann also nicht über window.opener auf deine zugreifen. rel="noopener" zu schreiben kostet nichts und schützt Besucher mit älteren Browsern, deshalb verlangen es die meisten Styleguides weiterhin.

Q: Was ist der Unterschied zwischen noopener und noreferrer?

noopener trennt die Verbindung zwischen den beiden Tabs (window.opener ist im neuen Tab null). noreferrer macht das auch und verhindert zusätzlich, dass der Browser die URL deiner Seite als Referrer mitschickt, sodass die Statistik der anderen Website den Besuch als direkten Aufruf sieht.

Q: Kann HTML erzwingen, dass ein Link in einem neuen Fenster statt einem Tab öffnet?

Nein. target="_blank" verlangt einen neuen Browsing-Kontext, und ob das ein Tab oder ein Fenster wird, entscheiden der Browser und die Einstellungen des Nutzers. Aktuelle Browser öffnen einen Tab.

Q: Wie öffne ich alle Links einer Seite in einem neuen Tab?

Setz in den . Jeder Link ohne eigenes target öffnet sich dann in einem neuen Tab. Das betrifft auch Formulare, nimm es also nur auf Seiten, wo du genau das willst.

Einen Link mit target="_blank" in neuem Tab öffnen

Füg dem Link target="_blank" hinzu. Der Browser öffnet das Ziel in einem neuen Tab und lässt deine Seite, wo sie war.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

Das ist die ganze Technik: target="_blank" am <a>, dazu rel="noopener", das als Nächstes erklärt wird. Leser können jeden Link auch selbst in einem neuen Tab öffnen, mit Strg+Klick (Cmd+Klick auf dem Mac) oder einem Klick mit der mittleren Maustaste. Nimm target="_blank" also nur, wenn das Verlassen der Seite sie etwas kosten würde, etwa ein halb ausgefülltes Formular oder ein laufendes Video.

Die Vorschauen auf dieser Seite öffnen jeden externen Link in einem neuen Tab, mit oder ohne target, weil ein Beispielrahmen nie wegnavigieren darf. Um den Unterschied zu sehen, den target macht, speichere das Beispiel als Datei und öffne sie in deinem Browser.

rel="noopener" und rel="noreferrer"

Eine Seite, die mit target="_blank" geöffnet wurde, bekam früher in window.opener eine Referenz auf deine Seite und konnte damit deinen Tab auf eine andere URL schicken (zum Beispiel auf eine gefälschte Login-Seite). rel="noopener" entfernt diese Referenz.

Wert von `rel`	`window.opener` im neuen Tab	Referrer an die neue Website
keiner (alte Browser)	Deine Seite	Ja
keiner (aktuelle Browser)	`null`	Ja
`noopener`	`null`	Ja
`noreferrer`	`null`	Nein
`opener`	Deine Seite	Ja

Aktuelle Versionen von Chrome, Firefox und Safari behandeln jeden Link mit target="_blank" als noopener, es sei denn, du schreibst rel="opener". rel="noopener" trotzdem zu schreiben schützt Besucher mit älteren Browsern und macht die Absicht im Code sichtbar.

noreferrer verhindert zusätzlich, dass der Browser den Referrer mitschickt, die verlinkte Website sieht also nicht, von welcher Seite der Besucher kam. Das ist eine Frage des Datenschutzes, nicht der Sicherheit: Nimm es, wenn deine URL privat bleiben soll, und lass es bei Partnern weg, die deinen Traffic sehen müssen.

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel nimmt mehrere Werte, getrennt durch Leerzeichen, also lässt sich noopener mit SEO-Werten kombinieren: rel="noopener sponsored" für einen bezahlten Link, rel="noopener nofollow" für einen Link, für den du nicht bürgst.

Zeig Nutzern, dass der Link einen neuen Tab öffnet

Ein neuer Tab, der ohne Vorwarnung aufgeht, verwirrt, besonders Screenreader-Nutzer, die vielleicht nicht merken, dass sich die Seite geändert hat. Sag es im Link. Ein kleines Icon zeigt es sehenden Nutzern; versteckter Text sagt es Screenreader-Nutzern:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

Der Selektor a[target="_blank"] fügt jedem Link, der einen neuen Tab öffnet, automatisch den Pfeil hinzu, du vergisst also nie einen. Das versteckte span wird als Teil des Linknamens vorgelesen, „accessibility guidelines (opens in a new tab)“, nimmt aber auf dem Bildschirm keinen Platz ein.

Jeden externen Link automatisch markieren

Attributselektoren können Links anhand ihres href stylen. Hier bekommt jeder Link, der mit http beginnt, den Pfeil, und Links innerhalb der Website nicht:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= bedeutet „beginnt mit“. Der Selektor stylt nur die Links: Die Attribute target und rel müssen trotzdem im HTML stehen.

Die Werte von target

target gibt an, wo der Link geöffnet wird. Es gibt vier Schlüsselwörter, und jeder andere Wert ist ein Name:

`target`	Öffnet den Link in
`_self`	Demselben Tab oder Frame. Das ist der Standard.
`_blank`	Einem neuen, unbenannten Tab
`_parent`	Dem Eltern-Frame des aktuellen Frames (außerhalb von Frames wie `_self`)
`_top`	Dem ganzen Tab, aus allen Frames heraus
ein beliebiger Name, z. B. `help`	Dem Tab oder Frame mit diesem Namen, der angelegt wird, falls es ihn nicht gibt

Ein benanntes Ziel wird wiederverwendet. Jeder Link mit target="help" öffnet sich im selben Tab, wer also fünf Hilfe-Links anklickt, bekommt einen Tab, nicht fünf. _top nimmst du in einem <iframe>, wenn ein Link die ganze Seite ersetzen soll statt nur den Frame.

Alle Links mit dem base-Element in neuem Tab öffnen

<base target="_blank"> im <head> legt das Standardziel für jeden Link und jedes Formular der Seite fest:

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

Das eigene target eines Links hat Vorrang vor <base>. Nimm das selten: Eine Seite, auf der jeder Link einen neuen Tab öffnet, ist lästig zu bedienen.

Einen neuen Tab per JavaScript öffnen

window.open(url, '_blank') öffnet einen Tab aus einem Skript heraus. Übergib 'noopener' als drittes Argument, um denselben Schutz wie mit dem rel-Attribut zu bekommen. Damit gibt window.open null zurück statt einer Referenz auf den neuen Tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

Browser blockieren window.open, wenn es nicht als Reaktion auf einen Klick oder Tastendruck ausgeführt wird. Ruf es also aus einem Event-Listener auf, nicht beim Laden der Seite oder nach einem Timer. Wenn das Ziel eine URL ist, die der Leser vorher sehen könnte, ist ein Link mit target="_blank" einfacher und funktioniert ohne JavaScript. Den Link selbst erklärt die Seite zum HTML Link.

Häufige Fehler

target="blank" ohne Unterstrich. Das ist ein Name, nicht das Schlüsselwort. Beim ersten Mal öffnet es trotzdem einen neuen Tab und verwendet diesen Tab dann für jeden anderen Link mit demselben Namen wieder.
target="_new". Auch nur ein Name, mit derselben Wirkung: ein wiederverwendeter Tab.
target an jeden Link setzen. Interne Links sollten im selben Tab öffnen. Wer einen neuen Tab will, weiß, wie er ihn bekommt.
Kein Hinweis, dass ein Link einen neuen Tab öffnet. Füg ein Icon und versteckten Text hinzu.
noreferrer an Partner- oder Affiliate-Links setzen und sich dann wundern, warum der Partner keine Weiterleitungen sieht.

Häufig gestellte Fragen

Wie öffne ich einen Link in HTML in einem neuen Tab?

Füg dem <a>-Tag target="_blank" hinzu: <a href="https://example.com" target="_blank" rel="noopener">Example</a>. Der Browser öffnet die Seite in einem neuen Tab und lässt die aktuelle Seite offen.

Brauche ich bei target="_blank" noch rel="noopener"?

Aktuelle Versionen von Chrome, Firefox und Safari wenden noopener automatisch auf Links mit target="_blank" an, die neue Seite kann also nicht über window.opener auf deine zugreifen. rel="noopener" zu schreiben kostet nichts und schützt Besucher mit älteren Browsern, deshalb verlangen es die meisten Styleguides weiterhin.

Was ist der Unterschied zwischen noopener und noreferrer?

noopener trennt die Verbindung zwischen den beiden Tabs (window.opener ist im neuen Tab null). noreferrer macht das auch und verhindert zusätzlich, dass der Browser die URL deiner Seite als Referrer mitschickt, sodass die Statistik der anderen Website den Besuch als direkten Aufruf sieht.

Kann HTML erzwingen, dass ein Link in einem neuen Fenster statt einem Tab öffnet?

Nein. target="_blank" verlangt einen neuen Browsing-Kontext, und ob das ein Tab oder ein Fenster wird, entscheiden der Browser und die Einstellungen des Nutzers. Aktuelle Browser öffnen einen Tab.

Wie öffne ich alle Links einer Seite in einem neuen Tab?

Setz <base target="_blank"> in den <head>. Jeder Link ohne eigenes target öffnet sich dann in einem neuen Tab. Das betrifft auch Formulare, nimm es also nur auf Seiten, wo du genau das willst.

Verwandte Konzepte