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.

When using target="_blank", developers commonly add:

rel="noopener noreferrer"

This improves security and privacy by preventing the newly opened page from gaining access to the original page through window.opener.

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.

Example 3: Compare both styles

<p><a href="/contact">Contact</a></p>
<p><a href="https://example.com" target="_blank" rel="noopener noreferrer">External Resource</a></p>

A common beginner rule is:

• internal page links usually open in the same tab
• external or reference links may open in a new tab when it helps the user

Minimum working version

<a href="http://your_url_here.html" target="_blank">Link</a>

Recommended version

<a href="http://your_url_here.html" target="_blank" rel="noopener noreferrer">Link</a>

The recommended version is preferred in modern code because it is safer.

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

<a href="page2.html">Same tab</a>
<a href="page2.html" target="_blank" rel="noopener noreferrer">New tab</a>

• First link: replaces the current page with page2.html
• Second link: keeps the current page and opens page2.html in a new tab or window

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</a>

Admin tools and internal systems

In admin panels, links to logs, monitoring tools, or reports often open in new tabs so the main workflow remains open.

Search results or resource lists

A resource page may contain many external references. Opening them in new tabs allows users to continue browsing the original list.

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 target="_blank"
• adds rel="noopener noreferrer"
• keeps internal links unchanged

Accessibility and clarity

Developers may also indicate to users that a link opens in a new tab, for example through text like:

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

This helps reduce surprise.

Guarding against unsafe usage

Teams sometimes enforce linting or code review rules so that any _blank link must also include rel="noopener noreferrer".

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 href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

3. Expecting HTML to force a tab instead of a window

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

This requests a new browsing context, but the browser decides whether it is a tab or a window.

4. Misspelling the target value

Broken:

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

blank is not the same as _blank.

Correct:

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

5. Using new tabs for every link

Opening every link in a new tab can frustrate users. Use it mainly when preserving the current page is actually helpful.

6. Forgetting the href

Broken:

<a target="_blank">Link</a>

Without href, the anchor does not behave like a normal link.

Correct:

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

_self vs _blank

HTML vs JavaScript for opening links

For normal clickable links, plain HTML is usually the best and simplest choice.

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
• Do not overuse new-tab links

Quick pattern

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

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 target="_blank", but internal navigation usually stays in the same tab unless there is a clear reason not to.

Is JavaScript required to open a link in a new tab?

No. For standard links, HTML alone is enough using target="_blank".

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