Introduction

Opening a link in a new tab or window is usually done with standard HTML, and the browser decides whether the result appears as a tab or a separate window. The main implementation detail is straightforward, but there are also usability and security details that are easy to miss.

The Standard HTML Approach

For a normal hyperlink, use the target attribute with _blank:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</a>

This tells the browser to open the destination in a new browsing context. In modern browsers that usually means a new tab, although user settings can turn it into a new window instead.

The rel="noopener noreferrer" part matters too. It prevents the new page from accessing the originating page through window.opener, which is better for security and isolation.

Opening from JavaScript

Sometimes the destination is chosen dynamically or tied to a button instead of a plain link. In that case, use window.open() from a user-initiated event:

1<button id="docsButton">Open docs</button>
2
3<script>
4  document.getElementById("docsButton").addEventListener("click", function () {
5    window.open("https://example.com/docs", "_blank", "noopener,noreferrer");
6  });
7</script>

This is useful when the URL is computed in code or when the interaction is not a standard anchor tag.

Why User Gesture Matters

Browsers often block pop-ups that are not triggered directly by the user. If window.open() runs inside a timer, async callback, or background script, the browser may treat it as a pop-up and block it.

That means code like this is unreliable:

setTimeout(() => {
  window.open("https://example.com", "_blank");
}, 1000);

The safer pattern is to open the new page in direct response to a click or keyboard action.

Choosing HTML vs JavaScript

Use plain HTML when you have a normal navigational link:

<a href="/guides/getting-started" target="_blank" rel="noopener noreferrer">
  Getting Started
</a>

Use JavaScript when the destination, timing, or behavior depends on application state.

As a rule, prefer anchors for navigation because they are better for accessibility, keyboard behavior, browser features, and basic progressive enhancement.

Tab vs Window Is Not Fully Under Your Control

Developers often ask how to force a new window instead of a tab. In modern browsers, that is largely controlled by browser settings and user preference. You can request a new browsing context, but you cannot reliably dictate whether the browser renders it as a tab or a separate window.

That is why the most accurate phrasing is usually “open in a new tab or window,” not “guarantee a new window.”

Security and UX Considerations

Opening new tabs can be useful for external sites, reference material, or long-running flows where users may want to keep their place. It can also be annoying if overused.

Good reasons to open in a new tab include:

• external documentation
• third-party payment or auth flows
• downloadable reports or previews

Poor reasons include forcing basic internal navigation into a new tab when the user did not ask for it.

If the action opens a new tab, consider making that visible in the link text or nearby UI so users are not surprised.

Common Pitfalls

The most common issue is omitting rel="noopener noreferrer" when using _blank. That leaves the opener relationship in place and is unnecessary in most cases.

Another pitfall is using JavaScript where a normal anchor would be simpler and more accessible. Links should usually stay links.

Developers also sometimes expect window.open() to work from background code without restrictions. Browsers aggressively limit that behavior to reduce pop-up abuse.

Finally, do not assume you can force a browser to use a separate window. You can request a new context, but the browser decides how to present it.

Summary

• Use target="_blank" to open a link in a new tab or window.
• Pair it with rel="noopener noreferrer" for security.
• Use window.open() only when you need dynamic behavior or a non-link control.
• Trigger new-tab logic from a user gesture or browsers may block it.
• Expect the browser and user settings to decide whether the new context appears as a tab or a window.