Bird
Raised Fist0
HTMLmarkup~10 mins

Opening links in new tab in HTML - Interactive Code Practice

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to open the link in a new tab.

HTML
<a href="https://example.com" [1]>Visit Example</a>
Drag options to blanks, or click blank then click option'
Arel="noopener"
Btarget="_blank"
Chref="_blank"
Dsrc="_blank"
Attempts:
3 left
💡 Hint
Common Mistakes
Using href="_blank" instead of target="_blank".
Forgetting to add the target attribute.
2fill in blank
medium

Complete the code to add security when opening a link in a new tab.

HTML
<a href="https://example.com" target="_blank" [1]>Visit Example</a>
Drag options to blanks, or click blank then click option'
Arel="bookmark"
Brel="nofollow"
Crel="external"
Drel="noopener"
Attempts:
3 left
💡 Hint
Common Mistakes
Using rel="nofollow" which is for SEO, not security.
Omitting the rel attribute when using target="_blank".
3fill in blank
hard

Fix the error in the code to correctly open the link in a new tab with security.

HTML
<a href="https://example.com" target=[1] rel=[2]>Visit Example</a>
Drag options to blanks, or click blank then click option'
A"_self"
B"_blank"
C"noopener"
D"nofollow"
Attempts:
3 left
💡 Hint
Common Mistakes
Using target="_self" which opens in the same tab.
Using rel="nofollow" which is unrelated to security.
4fill in blank
hard

Fill both blanks to open the link in a new tab safely and add a descriptive title.

HTML
<a href="https://example.com" [1] [2] title="Go to Example website">Example</a>
Drag options to blanks, or click blank then click option'
Atarget="_blank"
Brel="noopener"
Crel="nofollow"
Dtarget="_self"
Attempts:
3 left
💡 Hint
Common Mistakes
Using rel="nofollow" instead of rel="noopener".
Forgetting to add target="_blank".
5fill in blank
hard

Fill all three blanks to create a link that opens in a new tab, is secure, and accessible.

HTML
<a href="https://example.com" [1] [2] [3]>Example Site</a>
Drag options to blanks, or click blank then click option'
Atarget="_blank"
Brel="noopener"
Caria-label="Visit Example website in a new tab"
Dtitle="Example"
Attempts:
3 left
💡 Hint
Common Mistakes
Using title instead of aria-label for accessibility.
Omitting rel="noopener" when using target="_blank".

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