How to open a link in a new tab

Short answer

Add the target="_blank" attribute to the link:

<a href="https://example.com" target="_blank">Open in a new tab</a>

The rel attribute

rel="noopener" used to be mandatory: without it the opened page got access to your tab through window.opener. Modern browsers enable this behavior for target="_blank" on their own, but the attribute does no harm. rel="noreferrer" also hides from the site where the visitor came from:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">A partner site</a>

Warning the user

An unexpected new tab is confusing, especially for screen reader users. Mention it in the text or with an icon:

<a href="https://example.com" target="_blank">Documentation (opens in a new tab) ↗</a>

When it is appropriate

Open links to other sites and documents in a new tab when the user must not lose the current page — while filling in a form, for example.

Common mistake

Every link is opened in a new tab, including the pages of your own site. The user piles up dozens of tabs, and the Back button stops working. It is better to let the user decide: a middle click or Ctrl+click opens a link separately.