Du kennst jetzt zwei Arten von Links: relative Pfade zu eigenen Seiten und absolute Adressen zu fremden Webseiten. In diesem Kapitel geht es um ein nützliches Extra-Attribut speziell für externe Links.

Das Problem: der Besucher verschwindet

Wenn jemand auf einen Link zu einer fremden Webseite klickt, öffnet sich diese normalerweise im selben Browser-Tab - deine eigene Webseite ist dann weg, und der Besucher muss extra zurück klicken, um wiederzukommen. Bei wichtigen internen Links (wie in Kapitel 14) ist das gewollt. Bei einem Link zu einer fremden Webseite ist es aber oft schöner, wenn sie sich in einem neuen Tab öffnet.

Das Attribut target="_blank"

<a href="https://www.fifa.com" target="_blank">FIFA-Webseite</a>

Das Attribut target="_blank" sagt dem Browser: "Öffne diesen Link in einem neuen Tab statt im aktuellen." Beachte: Ein Tag kann, wie schon erwähnt, mehrere Attribute gleichzeitig haben - hier stehen href und target einfach hintereinander, jeweils mit Leerzeichen getrennt.

Ein wichtiges Sicherheits-Extra: rel="noopener"

Wenn du target="_blank" benutzt, solltest du aus Sicherheitsgründen immer noch ein weiteres Attribut dazuschreiben: rel="noopener". Der technische Grund ist etwas fortgeschritten (kurz gesagt: die neu geöffnete Seite könnte sonst theoretisch Zugriff auf deine eigene Seite bekommen), aber die Lösung ist einfach: schreib es einfach immer mit dazu, wenn du target="_blank" benutzt.

<a href="https://www.fifa.com" target="_blank" rel="noopener">FIFA-Webseite</a>

Finns Link anpassen

Passe den FIFA-Link auf deiner Webseite an, sodass er sich in einem neuen Tab öffnet:

<h2>Mein Verein</h2>
<p>Ich spiele beim SV Musterstadt. Mehr Infos gibt es auf der
  <a href="https://www.dfb.de" target="_blank" rel="noopener">Webseite des DFB</a>.</p>