Opening links in new tab in HTML

Introduction

Opening links in a new tab lets users keep the current page open while exploring other pages.

When you want users to visit external websites without leaving your site.

When linking to documents or resources that users might want to keep open.

When you want to keep your website visible while users check related information.

When linking to long articles or references that users might want to read alongside your page.

Syntax

HTML

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

The target="_blank" attribute tells the browser to open the link in a new tab.

Always add rel="noopener noreferrer" for security and performance when using target="_blank".

Examples

Opens the link in a new tab safely.

HTML

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

Opens a local page in a new tab.

HTML

<a href="page.html" target="_blank" rel="noopener noreferrer">Open Page</a>

Sample Program

This page shows a link that opens Wikipedia in a new browser tab when clicked.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Open Link in New Tab</title>
</head>
<body>
  <p>Click the link below to open it in a new tab:</p>
  <a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Go to Wikipedia</a>
</body>
</html>

Important Notes

Using rel="noopener noreferrer" prevents the new page from controlling your page and improves security.

Opening too many links in new tabs can confuse users; use this feature thoughtfully.

Test your links in different browsers to ensure they open as expected.

Summary

Use target="_blank" to open links in new tabs.

Add rel="noopener noreferrer" for security.

Opening links in new tabs helps users keep your site open while exploring.

Practice

1. Which attribute in an HTML <a> tag makes the link open in a new browser tab?

easy

A. open="new"

B. href="_blank"

C. rel="new_tab"

D. target="_blank"

Solution

1. Step 1: Understand the purpose of the target attribute

   The target attribute in an <a> tag controls where the linked document opens.

2. Step 2: Identify the correct value for opening in a new tab

   Using target="_blank" tells the browser to open the link in a new tab or window.

3. Final Answer:

   <a href="url" target="_blank"> -> Option D

4. Quick Check:

   Open link in new tab = target="_blank" [OK]

Hint: Use target="_blank" to open links in new tabs [OK]

Common Mistakes:

• Using href="_blank" instead of target
• Using rel attribute to open new tab
• Using open="new" which is invalid

2. Which of the following is the correct syntax to open a link in a new tab with security best practices?

easy

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

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

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

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

Solution

1. Step 1: Use target="_blank" to open link in new tab

   This attribute opens the link in a new tab or window.

2. Step 2: Add rel="noopener noreferrer" for security

   This prevents the new page from accessing the original page via JavaScript, protecting against security risks.

3. Final Answer:

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

4. Quick Check:

   New tab + security = target="_blank" + rel="noopener noreferrer" [OK]

Hint: Always add rel="noopener noreferrer" with target="_blank" [OK]

Common Mistakes:

• Omitting rel attribute causing security risk
• Using target="new" instead of _blank
• Using rel without target="_blank"

3. What will happen when the following HTML code is clicked?

<a href="https://openai.com" target="_blank">Visit OpenAI</a>

medium

A. The link opens in a new tab.

B. The link opens in the same tab.

C. The link does not open anywhere.

D. The link opens in a new window but not a tab.

Solution

1. Step 1: Check the target attribute value

   The attribute target="_blank" instructs the browser to open the link in a new tab or window.

2. Step 2: Understand browser behavior

   Most modern browsers open links with target="_blank" in a new tab by default.

3. Final Answer:

   The link opens in a new tab. -> Option A

4. Quick Check:

   target="_blank" means new tab [OK]

Hint: target="_blank" opens link in new tab by default [OK]

Common Mistakes:

• Thinking it opens in the same tab
• Confusing new window with new tab
• Assuming no action happens without rel attribute

4. Identify the error in this HTML snippet if the goal is to open the link in a new tab securely:

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

medium

A. href attribute is missing protocol.

B. Missing rel="noopener noreferrer" attribute.

C. Incorrect target value; should be "_blank" with underscore.

D. The <a> tag is not closed properly.

Solution

1. Step 1: Check the target attribute value

   The value is "blank" but it must be "_blank" with an underscore to open in a new tab.

2. Step 2: Confirm other attributes

   While adding rel="noopener noreferrer" is recommended for security, the main error preventing new tab opening is the wrong target value.

3. Final Answer:

   Incorrect target value; should be "_blank" with underscore. -> Option C

4. Quick Check:

   target must be "_blank" with underscore [OK]

Hint: target="_blank" needs underscore, not just "blank" [OK]

Common Mistakes:

• Using target="blank" without underscore
• Forgetting rel attribute for security
• Assuming missing protocol breaks new tab

5. You want to create a navigation menu where all external links open in new tabs securely, but internal links open in the same tab. Which HTML snippet correctly applies this?

hard

A. <a href="/about" target="_blank">About</a> <a href="https://external.com" target="_blank">External</a>

B. <a href="/about">About</a> <a href="https://external.com" target="_blank" rel="noopener noreferrer">External</a>

C. <a href="/about" target="_blank" rel="noopener noreferrer">About</a> <a href="https://external.com">External</a>

D. <a href="/about" rel="noopener noreferrer">About</a> <a href="https://external.com" target="blank" rel="noopener">External</a>

Solution

1. Step 1: Identify internal vs external link behavior

   Internal links (like "/about") should open in the same tab, so no target attribute is needed.

2. Step 2: Apply new tab and security attributes to external links

   External links should use target="_blank" and rel="noopener noreferrer" for security and to open in new tabs.

3. Final Answer:

   <a href="/about">About</a> <a href="https://external.com" target="_blank" rel="noopener noreferrer">External</a> -> Option B

4. Quick Check:

   Internal same tab, external new tab + security [OK]

Hint: Use target and rel only on external links [OK]

Common Mistakes:

• Adding target="_blank" to internal links unnecessarily
• Using target="blank" without underscore
• Omitting rel attribute on external links