How to Open a Link in a New Tab in HTML

What you’ll build or solve

You’ll open a link in a new browser tab using a single HTML attribute.

When this approach works best

Opening a link in a new tab works best when you:

• Send users to an external website.
• Link to documentation or references.
• Share third-party resources without interrupting your page.
• Let users view a file while keeping your page open.

This approach is a bad idea for normal internal navigation. Most internal links should open in the same tab.

Prerequisites

• A code editor
• A browser
• Basic understanding of the <a> tag

No additional setup is required.

Step-by-step instructions

Step 1: Add target="_blank" to your link

To open a link in a new tab, add the target="_blank" attribute to your anchor tag.

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

• href defines the destination.
• target="_blank" tells the browser to open it in a new tab.

This works with any valid link, including external websites, internal pages, and files.

What to look for:

• The value must be _blank with an underscore.
• If the link opens in the same tab, confirm the target attribute is present and spelled correctly.

Step 2: Add rel="noopener noreferrer" for external links

When linking to third-party websites, include a rel attribute for security.

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

• noopener prevents the new page from accessing your page through window.opener.
• noreferrer prevents the browser from sending referral information.

Use this for external links. Internal links usually do not need it.

What to look for:

• The same target="_blank" technique works for external sites, internal pages, and files.
• For file downloads, use the download attribute instead of relying on a new tab:

<ahref="resume.pdf"download>Download Resume</a>

• Internal navigation often works better in the same tab.
• Confirm the URL in href is correct and not empty.

Examples you can copy

Example 1: External documentation link

<p>
  Read more on
<ahref="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer">
    MDN Web Docs
</a>.
</p>

Example 2: External partner link in navigation

<nav>
<ahref="index.html">Home</a>
<ahref="pricing.html">Pricing</a>
<ahref="https://partner-site.com"
target="_blank"
rel="noopener noreferrer">
    Partner Site
</a>
</nav>

Example 3: Open a PDF in a new tab

<ahref="guide.pdf"target="_blank">
  View Guide
</a>

Users can read the file while your page stays open.

Common mistakes and how to fix them

Mistake 1: Forgetting the target attribute

What you might do

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

Why it breaks

Links open in the same tab by default.

Fix

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

Mistake 2: Missing rel on external links

What you might do

<ahref="https://example.com"target="_blank">
  External Site
</a>

Why it causes issues

Without rel="noopener noreferrer", the new page can access your original page through window.opener.

Fix

<ahref="https://example.com"
target="_blank"
rel="noopener noreferrer">
  External Site
</a>

Mistake 3: Typing the target value incorrectly

What you might do

<ahref="https://example.com"target="blank">
  Visit
</a>

Why it breaks

The value must be _blank, not blank.

Fix

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

Troubleshooting

If the link opens in the same tab, check that target="_blank" is present.

If security scanners warn about external links, confirm rel="noopener noreferrer" is added.

If nothing happens on click, verify the href value is valid.

If a file does not open, confirm the file path is correct.

If pop-up blockers interfere, test in a different browser.

Quick recap

• Add target="_blank" to open a link in a new tab.
• Use rel="noopener noreferrer" for external links.
• The same technique works for pages, websites, and files.
• Use download if you want to suggest downloading instead.
• Double-check that _blank includes the underscore.