Did you notice on some websites where when you click a link — it will open a page in a new tab? And you want to know how to do this trick. In this article, you will learn how to do by following these three easy steps.
Step 1: Create the link
The first step is to create a link in the HTML file. Start by adding the a element and set the href value to the link address. In this example below, the link will open a Coderslang blog in the same tab.
<a href="https://learn.coderslang.com/">Go to Coderslang blog</a>
Step 2: Add the target attribute
The next step is to add the target attribute to the link.
target is the HTML attribute that tells the browser where to open the link. The target can be in the same tab or a new tab.
In the example below, we add the target attribute to the link and set the target value to _blank. The _blank value is what will make the linked document open in a different tab.
<a href="https://learn.coderslang.com/" target="_blank">Go to Coderslang blog</a>
If you go back now and click the link again, it will open the Coderslang blog in a new tab!
Step 3: Add the no referrer and no opener to the link
One last step is to add the rel="noreferrer noopener" attribute to the link. That is because the target attribute makes your link vulnerable to phishing attacks, and you do not want this to happen to your users.
<a href="https://learn.coderslang.com/" target="_blank" rel="noreferrer noopener">Go to Coderslang blog</a>
By adding the no referrer and no opener to the link, your users will be safe and prevent possible phishing attacks from bad people.
Conclusion
And there you go! You now know how to open the link in a new tab using the target="_blank" attribute. Always make sure to include the no referrer and no opener whenever using the target attribute to keep your link safe from malicious attacks.
I hope you find this tutorial helpful and happy coding!
Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript