Link in neuem Tab in HTML öffnen

Sushant Poudel 19 Februar 2023
Link in neuem Tab in HTML öffnen

In diesem Artikel wird eine Methode zum Öffnen eines Links in einer neuen Registerkarte in HTML erläutert.

Wir können das Attribut target im Anchor-Tag verwenden, um einen Link in einem neuen Tab in HTML zu öffnen. Der Wert _blank im Attribut target des Anker-Tags öffnet den Link im neuen Tab. Das Anchor-Tag <a> definiert einen Hyperlink, der verwendet wird, um von einer Seite auf eine andere zu verlinken. Das Attribut href setzt die URL der Seite, auf die Sie verlinken möchten. Die Option target="_blank" schaltet den Link auf den neuen Tab um. Der Wert _blank weist den Browser an, den Link je nach Browsereinstellungen in einem neuen Tab zu öffnen. Als Sicherheitsmaßnahme können wir das Attribut rel im Anker-Tag mit dem Wert noopener noreferrer hinzufügen. Der rel=" noopener noreferrer" soll verhindern, dass der neu geöffnete Tab den ursprünglichen Tab böswillig verändern kann. Die modernen Browser setzen die Option jedoch implizit, wenn wir die Option target= "_blank" verwenden.

Öffnen Sie beispielsweise innerhalb des HTML-Bodys den Anker-Tab <a> und geben Sie das href-Attribut darin ein. Schreiben Sie die URL https://www.facebook.com/ als Wert des Attributs href. Dann schreiben Sie target als Attribut des Anchor-Tags und geben ihm den Wert _blank. Danach schreiben Sie das Attribut rel mit dem Wert noopener noreferrer. Schreiben Sie dann den Text Link zwischen das Anker-Tag. Vergessen Sie nicht, das Anker-Tag gefolgt vom Body-Tag zu schließen.

Das folgende Beispiel öffnet einen neuen Tab, wenn wir auf das Wort Link klicken. Es öffnet die Facebook-Seite, wenn wir auf den Link klicken.

Beispielcode:

<body>
    <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer" >
        Link
    </a>
</body>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn