Make HTML link open in new tab HTML

When you create an anchor a link element in HTML it will open in the same tab by default, but you have the option to make the link open in a new tab with the target attribute. Here is how to make an HTML link open in a new tab as well as some important security measures.

First, you need to add the target attribute your link and set the value to _blank. This is what tells the browser to open the link in a new tab (or window). But don't stop there.

Then you should add the rel attribute to your link and set the value to noopener noreferrer.

This prevents malicious sites from being able to use window.opener.location to maliciously change the url of your page in the background to something like a fake login page while the user is on their page in the new tab.

noopener sets window.opener to null and noreferrer disables the Referrer HTTP header.

Here is a full example of an HTML link that opens in a new tab and has noopener and noreferrer.

Most modern browsers now automatically treat links with target="_blank" as if they have the rel attribute with the value noopener but you should still include rel="noopener noreferrer" in the markup of your links for security in older browser versions and Internet Explorer.

Now you know how to safely make an HTML link open in a new tab using target="_blank" and rel="noopener noreferrer".

Learn more about noopener on MDN and the problem that rel noopener solves.

Thanks for reading.
Ryan

Published on 3 Aug 2022