How to Open a Link in New Tab using HTML?

If you click on a normal HTML link, it will open in the current tab or window of the browser by default.

A link will open in the current or a new tab is controlled by HTML’s target attribute. By default, the target attribute is set to _self which opens the link in the current tab of the browser.

To open a link in the new tab you have to set the target attribute to _blank. When you add the target="_blank" attribute to an anchor tag(<a>), it tells the browser that this link should be opened up in a new tab.

Here is an example that would open up the Wikipedia home page in a new tab on clicking:

Example:

<a href="https://wikipedia.org" target="_blank">Wikipedia homepage</a>

Security issues with target=”_blank”

When you are using target="_blank" on an anchor tag, you should also add rel="noopener noreferrer" attribute to it. If you aren’t adding this, you are making the original webpage vulnerable to phishing attacks.

The moment you open up a webpage in a new tab by clicking the link that does not have the rel="noopener noreferrer" attribute, the newly opened site still has ongoing access to the site opened in the original tab and attackers can take advantage of it.

So long story short, you should always add rel="noopener noreferrer" whenever you are using the target="_blank" attribute to prevent your site from any malicious activity.

So, here is the modified version of the above example:

Example:

<a href="https://wikipedia.org" target="_blank" rel="noopener noreferrer">Wikipedia homepage</a>

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts