Bird
Raised Fist0
HTMLmarkup~15 mins

Opening links in new tab in HTML - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Opening Links in a New Tab
📖 Scenario: You are creating a simple webpage with links to useful websites. You want these links to open in a new browser tab when clicked, so users don't lose your page.
🎯 Goal: Build a webpage with three links that open in new tabs when clicked.
📋 What You'll Learn
Create an HTML skeleton with <!DOCTYPE html>, <html>, <head>, and <body> tags
Add three links with exact URLs and text
Make sure each link opens in a new tab using the correct attribute
Use semantic HTML and include a page title
💡 Why This Matters
🌍 Real World
Opening links in new tabs is common on websites to keep users on the original page while letting them explore external content.
💼 Career
Web developers must know how to safely open links in new tabs to improve user experience and maintain security.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the basic HTML skeleton with <!DOCTYPE html>, <html lang="en">, <head> containing a <meta charset="UTF-8"> and a <title>Useful Links</title>, and an empty <body> tag.
HTML
Hint

Start by typing the basic HTML page structure with the required tags and a title.

2
Add three links inside the body
Inside the <body> tag, add three links with these exact URLs and link texts:
1. URL: https://www.google.com, text: Google
2. URL: https://www.wikipedia.org, text: Wikipedia
3. URL: https://www.github.com, text: GitHub.
HTML
Hint

Use the <a> tag with the href attribute for each link inside the body.

3
Add the attribute to open links in a new tab
Add the attribute target="_blank" to each of the three <a> tags so that clicking them opens the link in a new browser tab.
HTML
Hint

Add target="_blank" inside each <a> tag to open links in new tabs.

4
Add security attribute to links
Add the attribute rel="noopener noreferrer" to each <a> tag along with target="_blank" to improve security and privacy when opening links in new tabs.
HTML
Hint

Adding rel="noopener noreferrer" prevents security risks when opening links in new tabs.

Practice

(1/5)
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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard