Runnable HTML Docs: Open Link in New Tab

Q: How do I make a link open in a new tab in HTML?

Add target="blank" to the tag: Example . The browser opens the page in a new tab and keeps the current page open.

Q: Do I still need rel="noopener" with target="_blank"?

Current Chrome, Firefox and Safari apply noopener to target="_blank" links automatically, so the new page cannot reach back to yours through window.opener. Writing rel="noopener" costs nothing and protects visitors on older browsers, so most style guides still ask for it.

Q: What is the difference between noopener and noreferrer?

noopener cuts the link between the two tabs (window.opener is null in the new one). noreferrer does that and also stops the browser from sending your page's URL as the referrer, so the other site's analytics sees the visit as direct.

Q: Can HTML force a link to open in a new window instead of a tab?

No. target="_blank" asks for a new browsing context, and the browser and the user's settings decide whether that is a tab or a window. Current browsers open a tab.

Q: How do I open all links on a page in a new tab?

Put in the . Every link without its own target then opens in a new tab. It also affects forms, so use it only on pages where that is really what you want.

Open a link in a new tab with target="_blank"

Add target="_blank" to the link. The browser opens the destination in a new tab and leaves your page where it was.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

That is the whole technique: target="_blank" on the <a>, plus rel="noopener", explained next. Readers can also open any link in a new tab themselves with Ctrl+click (Cmd+click on a Mac) or a middle click, so use target="_blank" only when leaving the page would cost them something, such as a half-filled form or a video that is playing.

The previews on this page open every external link in a new tab, with or without target, because an example frame must never navigate away. To see the difference target makes, save the example as a file and open it in your browser.

rel="noopener" and rel="noreferrer"

A page opened with target="_blank" used to get a reference back to your page in window.opener, and could use it to send your tab to another URL (for example a fake login page). rel="noopener" removes that reference.

`rel` value	`window.opener` in the new tab	Referrer sent to the new site
none (old browsers)	Your page	Yes
none (current browsers)	`null`	Yes
`noopener`	`null`	Yes
`noreferrer`	`null`	No
`opener`	Your page	Yes

Current versions of Chrome, Firefox and Safari treat every target="_blank" link as noopener unless you write rel="opener". Writing rel="noopener" anyway protects visitors on older browsers and makes the intent visible in the code.

noreferrer also stops the browser from sending the referrer, so the site you link to does not see which page the visitor came from. That is a privacy choice, not a security one: use it when your URL should stay private, and leave it out for partners who need to see your traffic.

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel takes several values separated by spaces, so noopener combines with SEO values: rel="noopener sponsored" for a paid link, rel="noopener nofollow" for a link you do not vouch for.

Tell users the link opens a new tab

A new tab that opens without warning is disorienting, especially for screen reader users, who may not notice that the page changed. Say so in the link. A small icon shows it to sighted users; hidden text says it to screen reader users:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

The a[target="_blank"] selector adds the arrow to every new tab link automatically, so you never forget one. The hidden span is read as part of the link name, "accessibility guidelines (opens in a new tab)", but takes no space on screen.

Mark every external link automatically

Attribute selectors can style links by their href. Here every link that starts with http gets the arrow, and links inside the site do not:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= means "starts with". The selector only styles the links: the target and rel attributes still have to be in the HTML.

The target values

target names where the link opens. There are four keywords, and any other value is a name:

`target`	Opens the link in
`_self`	The same tab or frame. This is the default.
`_blank`	A new, unnamed tab
`_parent`	The parent of the current frame (same as `_self` outside frames)
`_top`	The whole tab, breaking out of every frame
any name, e.g. `help`	The tab or frame with that name, created if it does not exist

A named target is reused. Every link with target="help" opens in the same tab, so a reader who clicks five help links gets one tab, not five. _top is the one to use inside an <iframe> when a link should replace the whole page rather than the frame.

Open all links in a new tab with the base element

<base target="_blank"> in the <head> sets the default target for every link and form on the page:

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

A link's own target wins over <base>. Use this rarely: a page where every link opens a new tab is annoying to use.

Open a new tab from JavaScript

window.open(url, '_blank') opens a tab from a script. Pass 'noopener' as the third argument for the same protection as the rel attribute. With it, window.open returns null instead of a reference to the new tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

Browsers block window.open unless it runs in response to a click or key press, so call it from an event listener, not on page load or after a timer. If the destination is a URL the reader could see beforehand, a link with target="_blank" is simpler and works without JavaScript. The link itself is covered in HTML anchor tag.

Common mistakes

target="blank" without the underscore. It is a name, not the keyword. It still opens a new tab the first time, then reuses that tab for every other link with the same name.
target="_new". Also just a name, with the same effect: one reused tab.
Putting target on every link. Internal links should open in the same tab. Readers who want a new tab know how to get one.
No indication that a link opens a new tab. Add an icon and hidden text.
Adding noreferrer to partner or affiliate links and then wondering why the partner sees no referrals.

Frequently Asked Questions

How do I make a link open in a new tab in HTML?

Add target="_blank" to the <a> tag: <a href="https://example.com" target="_blank" rel="noopener">Example</a>. The browser opens the page in a new tab and keeps the current page open.

Do I still need rel="noopener" with target="_blank"?

Current Chrome, Firefox and Safari apply noopener to target="_blank" links automatically, so the new page cannot reach back to yours through window.opener. Writing rel="noopener" costs nothing and protects visitors on older browsers, so most style guides still ask for it.

What is the difference between noopener and noreferrer?

noopener cuts the link between the two tabs (window.opener is null in the new one). noreferrer does that and also stops the browser from sending your page's URL as the referrer, so the other site's analytics sees the visit as direct.

Can HTML force a link to open in a new window instead of a tab?

No. target="_blank" asks for a new browsing context, and the browser and the user's settings decide whether that is a tab or a window. Current browsers open a tab.

How do I open all links on a page in a new tab?

Put <base target="_blank"> in the <head>. Every link without its own target then opens in a new tab. It also affects forms, so use it only on pages where that is really what you want.

Related concepts