Languages
[Edit]
EN

HTML - open link in new tab

6 points
Created by:
Elias999
489

In this article, we would like to show you how in a safe way create a link that is opened after a click in a new tab.

Quick solution:

// ONLINE-RUNNER:browser;

<a href="https://some-website.com/path" rel="noopener" target="_blank">
  Link name
</a>

or:

// ONLINE-RUNNER:browser;

<a href="https://safe-website.com/path" target="_blank">
  Link name
</a>

Hint: rel="noopener" is not needed if we know the link opens the safe page
(safe page is the page that will not make unsafe opetaion on out web page using JavaScript).

 

Practical example

In this example, we use a element with additional properties to open the link in a new tab:

  • target="_blank" - specifies to open the linked page in a new tab,
  • rel="noreferrer noopener" - which is a good practice and helps to prevent tabnabbing and hide information about from what page the user came.

Note:

The default value of the target property is _self which opens linked page in the current working tab.

// ONLINE-RUNNER:browser;

<a href="https://dirask.com/findings" rel="noreferrer noopener" target="_blank">
  Check out Dirask findings!
</a>

References

  1. Link type "noreferrer" - W3C Working Draft
  2. Link type "noopener" - W3C Working Draft
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join