How to Open a Link in a New Tab in HTML

By the end of this page, you will understand how HTML links work, how to open a link in a new tab using target="_blank", and when to add security-related attributes such as rel="noopener noreferrer". You will also see practical examples, common mistakes, and how this pattern is used in real websites.

An HTML link is created with the <a> element, also called an anchor tag. Its href attribute tells the browser where to go when the user clicks the link.

To control where the linked page opens, HTML provides the target attribute.

The most common values are:

• _self — opens in the same tab or window (default behavior)
• _blank — opens in a new tab or window

A basic example looks like this:

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

In modern browsers, target="_blank" usually opens a new tab, but the exact behavior is ultimately controlled by the browser and user settings. In some cases, it may open a new window instead.

This matters because links are one of the most common parts of any web page. Developers often use new-tab links for:

• external websites
• downloadable resources
• documentation pages
• third-party tools

However, opening a new tab should be used thoughtfully. It changes the user's navigation flow, so it should be reserved for cases where keeping the current page open is genuinely helpful.

Think of a browser tab like a notebook page.

• A normal link replaces the page you are currently reading with a new page.
• A link with target="_blank" opens a new notebook page while keeping the current one open.

So the href says where to go, and target says where to open it.

The core syntax is:

<a href="URL" target="_blank" rel="noopener noreferrer">Link text</a>

Example 1: Open an external site in a new tab

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN Web Docs
</a>

This link:

• goes to https://developer.mozilla.org
• opens in a new tab or window
• uses rel="noopener noreferrer" for safer behavior

Example 2: Normal link in the same tab

<a href="/about">About Us</a>

Because no target is provided, the browser uses the default behavior: open in the current tab.

Consider this example:

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

Here is what happens step by step when the user clicks it:

1. The browser sees an <a> element.
2. It reads the href value: https://example.com.
3. It reads the target value: _blank.
4. _blank tells the browser to open the destination in a new browsing context.
5. In most browsers, that means a new tab.
6. The browser also reads rel="noopener noreferrer".
7. noopener prevents the new page from using window.opener to control the original page.
8. noreferrer prevents the referrer information from being sent in some situations.
9. The current page stays open, and the destination opens separately.

Small trace example

Opening links in a new tab is common in practical web development.

External documentation

A dashboard may link to outside documentation:

<a href="https://docs.example.com" target="_blank" rel="noopener noreferrer">Read the docs</a>

This lets users keep the dashboard open while reading help content.

Third-party services

A website may send users to payment providers, maps, or support portals:

<a href="https://support.example.com" target="_blank" rel="noopener noreferrer">Support Center</a>

Download or policy links

Terms, privacy pages, or PDFs may open separately so users do not lose their place:

<a href="/files/guide.pdf" target="_blank" rel="noopener noreferrer">Download Guide

In real projects, developers usually do more than just add target="_blank".

Common pattern for external links

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

This is the standard pattern for external links.

Conditional rendering in templates

In templating systems or component-based apps, developers often apply _blank only to external URLs.

<a href="https://partner.example.com" target="_blank" rel="noopener noreferrer">Partner Site</a>
<a href="/settings">Settings</a>

Reusable link components

In larger codebases, teams often create a shared link component that automatically:

• detects external links
• adds

1. Forgetting target="_blank"

Broken for this goal:

<a href="https://example.com">Example</a>

This opens in the current tab because no target was specified.

Correct:

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

2. Using _blank without rel

Less safe:

<a href="https://example.com" target="_blank">Example</a>

Better:

<a = = =>Example

_self vs _blank

Open a link in a new tab

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

Key attributes

• href — destination URL
• target="_blank" — opens in a new tab or window
• rel="noopener noreferrer" — improves security and privacy

Default behavior

<a href="/home">Home</a>

• No target means open in the current tab.

Important rules

• Use _blank, not blank
• Browsers may open a new tab or window
• Prefer rel="noopener noreferrer" with _blank

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

Add target="_blank" to the <a> tag:

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

Can HTML guarantee a new tab instead of a new window?

No. HTML can request a new browsing context with _blank, but the browser and user settings decide whether it appears as a tab or a window.

Why should I use rel="noopener noreferrer"?

It improves security by preventing the opened page from accessing the original page through window.opener, and it can also limit referrer information.

Should all external links open in a new tab?

Not always. Use new tabs only when keeping the current page open is helpful. Too many forced new tabs can be annoying.

Does target="blank" work?

Not as intended. The correct special value is _blank with the underscore.

Can I open internal links in a new tab too?

Yes. Any anchor can use , but internal navigation usually stays in the same tab unless there is a clear reason not to.

• HTML anchor tag (<a>)` — the element used to create links.
• HTML attributes — href, target, and rel are all attributes on HTML elements.
• Relative vs absolute URLs — helps you choose whether a link points inside your site or to another site.
• Web navigation — understanding how browsers move between pages.
• Accessibility in links — important for making link behavior clear to users.
• JavaScript window.open() — a programmatic way to open a URL when HTML links are not enough.
• Security for external links — relevant because _blank links often need noopener noreferrer.