HTML - open link in new tab

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>

Note (in 2021): when we use target="_blank" attribute in links, in major modern web browsers, it is automatically used rel="noopener" attribute behaving to prevent vulnerabilities - check notification here.

Warning: for security reasons, it is important to use rel="noopener" attribute, even if some tools warns us about unnecessary attribute.

or:

// ONLINE-RUNNER:browser;

<!-- WARNING: use this solution when you open the page that is safe, e.g. your pages -->

<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.

// ONLINE-RUNNER:browser;

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

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

References

1. Link type "noreferrer" - W3C Working Draft
2. Link type "noopener" - W3C Working Draft