Opening links in new tab in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What attribute do you add to an <a> tag to open a link in a new tab?

You add the target="_blank" attribute to the <a> tag to open the link in a new tab.

intermediate

Why should you add rel="noopener noreferrer" when using target="_blank"?

Adding rel="noopener noreferrer" improves security and privacy by preventing the new page from accessing the original page via JavaScript.

beginner

Write a simple HTML link that opens https://example.com in a new tab safely.

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

intermediate

What happens if you use target="_blank" without rel="noopener noreferrer"?

The new tab can access the original page's window object, which can be a security risk if the new page is malicious.

beginner

Can you open a link in the same tab using the target attribute? If yes, how?

Yes, by using target="_self" which is the default behavior and opens the link in the same tab.

Which attribute value opens a link in a new browser tab?

A _top

B _self

C _blank

D _parent

The target="_blank" attribute opens the link in a new tab or window.

What is the purpose of adding rel="noopener noreferrer" with target="_blank"?

A To improve security and privacy

B To open the link in the same tab

C To style the link

D To disable the link

It prevents the new page from accessing the original page's window object, improving security.

What happens if you omit the target attribute in an <a> tag?

A Link opens in a popup

B Link opens in a new tab

C Link does not work

D Link opens in the same tab

By default, links open in the same tab if target is not specified.

Which of these is NOT a valid target attribute value?

A _newtab

B _blank

C _self

D _parent

_newtab is not a valid target value; use _blank to open in a new tab.

Why is it important to consider accessibility when opening links in new tabs?

A Because new tabs are faster

B Because users should be informed about new tabs opening

C Because new tabs use less memory

D Because new tabs disable keyboard navigation

Informing users helps them understand the behavior and avoid confusion, improving accessibility.

Explain how to create a link in HTML that opens in a new tab safely and why each part is important.

Think about what happens when a link opens in a new tab and how to keep the original page safe.

Describe the default behavior of links in HTML and how the target attribute changes it.

Consider what happens when you click a link without any special attributes.

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