Opening links in new tab in HTML - Interactive Code Practice

Practice - 5 Tasks

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.

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

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".

Adding rel="noopener" prevents the new page from accessing the original page via JavaScript, improving security.

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.

The target attribute must be "_blank" to open a new tab, and rel="noopener" adds 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".

Use target="_blank" to open in a new tab and rel="noopener" for security. The title attribute helps screen readers and shows a tooltip.

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".

Use target="_blank" to open in a new tab, rel="noopener" for security, and aria-label to describe the link for screen readers.