Opening links in new tab in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Correct attribute to open link in new tab

Which attribute and value combination correctly opens a link in a new browser tab?

HTML

<a href="https://example.com" _____>Visit Example</a>

A target="_blank"

B open="new"

C newtab="true"

D href="_new"

💡 Hint

The attribute starts with 'target' and the value is a special keyword.

The 'target' attribute with value '_blank' tells the browser to open the link in a new tab or window.

🧠 Conceptual

intermediate

Security risk when opening links in new tab

What security risk can occur if you open links in a new tab using target="_blank" without extra precautions?

A The link will automatically download the page content.

B The link will not open at all in some browsers.

C The new tab will always open in incognito mode.

D The new page can access and manipulate the original page via JavaScript.

💡 Hint

Think about what the new page can do to the original page if not restricted.

Without precautions, the opened page can use JavaScript to access the original page's window object, which can be a security risk.

❓ rendering

advanced

Visual result of link with target and rel attributes

What will the user see when clicking this link?

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

HTML

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

A The link opens in the same tab and replaces the current page.

B The link opens in a new tab without giving the new page access to the original page.

C The link opens in a new tab but the new page can access the original page.

D The link does not open because rel="noopener" blocks it.

💡 Hint

rel="noopener" is a security feature that does not block opening.

The link opens in a new tab due to target="_blank". The rel="noopener" attribute prevents the new page from accessing the original page's window object.

❓ accessibility

advanced

Accessibility best practice for links opening in new tabs

Which practice improves accessibility when links open in new tabs?

A Inform users in the link text or with ARIA that the link opens in a new tab.

B Use only color changes to indicate the link opens in a new tab.

C Remove the href attribute to prevent confusion.

D Disable keyboard navigation for links that open in new tabs.

💡 Hint

Think about users who rely on screen readers or keyboard navigation.

Informing users helps them understand the link behavior, which is important for screen reader users and those who prefer keyboard navigation.

❓ selector

expert

CSS selector for styling links that open in new tabs

Which CSS selector correctly targets all links that open in new tabs using target="_blank"?

A a.newtab { color: blue; }

B a[href^="http"] { color: blue; }

C a[target="_blank"] { color: blue; }

D a[target_blank] { color: blue; }

💡 Hint

Attribute selectors use square brackets with attribute name and value.

The selector a[target="_blank"] selects all elements with target attribute equal to '_blank'.