Explain Codes LogoExplain Codes Logo

Is it alright to use target="_blank" in HTML5?

html
responsive-design
performance
best-practices
Alex KataevbyAlex Kataev·Jan 4, 2025
TLDR

Yes, target="_blank" is supported in HTML5. Always couple it with rel="noopener noreferrer" to guard against security risks such as phishing and tab-napping.

Example:

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

Use target="_blank" judiciously. Its usage should hinge on enhancing user experience (UX) and optimizing their workflow.

Workflow considerations

  • Mobile navigation: target="_blank" can disrupt navigation history on mobile, creating potential UX issues.
  • PDF handling: Most modern browsers can handle PDFs in-tab. Consider user preference before forcing new windows.
  • User autonomy: A cautious approach respects the user's workflow and doesn't dictate the browsing experience.

The role of JavaScript and interactive elements

JavaScript provides a more fine-grained control over new window behaviors, which can significantly improve UX. Tooltips, for instance, can provide the user with predictive information.

function openLink(url) { // "_blank" is like the hotel room and "noopener,noreferrer" is your DND sign✋ window.open(url, '_blank', 'noopener,noreferrer'); }

Remember, JavaScript usage should be judicious and considerate of non-Windows users as their system's handling of new windows may vary.

Security implications and countermeasures

target="_blank" coupled without rel="noopener noreferrer" paves way for potential security threats such as the window.opener API vulnerability. This weak spot can allow the new page to manipulate the original page, leading to phishing exploits.

Security mitigation tactics

  • rel="noopener": Restricts access to the window.opener property on the new page.
  • rel="noreferrer": Conceals the referrer data from the new page, essential to prevent access to window.opener.
  • Validation: Adopt a routine practice of inspecting links for security compliance. This keeps your site's purpose and safety intact.

Accepted practices within context

  • Images showcase: Some sites (like image galleries) may find target="_blank" handy to hold the main page up as users preview images.
  • External resources hotlinks: target="_blank" can facilitate seamless navigation between your content and external resources.
  • Context matters: The locale and specifics of every scenario play a crucial part. Assure that target="_blank" brings value and isn't a hassle.