How to Open Link in New Tab with HTML Target

This article shows you how to open a link in a new tab. Read the code and follow the examples to apply it to pages.

Understand the Target Attribute and its Values

The target attribute tells the browser where to open the link. Here is how you can write it:

<a href="{url}" target="_blank">Visit site</a>

Most users prefer a new tab for external links and long reads. The browser opens a new window or tab for the link target.

That happens so the old page stays in the browser and the reader can go back to it.

Examples of Links that Open in a New Tab

Basic external link:

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

This example opens an external site in a new tab and sets rel noopener. The rel attribute stops the new tab from accessing the opener page and keeps the session safe.

Load into a named frame (same site):

<a href="page.html" target="sidebar">Open panel</a>
<iframe name="sidebar"></iframe>

This example open a link into a named iframe on the same page to load content. Use this to keep user on the main page and to show details inline and avoid full page reloads.

Non-HTTP link (mailto):

<a href="mailto:you@example.com" target="_blank">Email us</a>

This example open a mailto link in a new tab to start an email draft outside the site. Use this to keep the main page state and to let the mail app handle the send action.

Wrapping Up

You learned how to open links in a new tab and how the target behaves.

Here is a quick recap:

• Use target _blank to open a new tab and use rel noopener to limit access.
• Test your links across main browsers to confirm the behavior.

FAQs

<a href="https://example.com" target="_blank">Visit Site</a>

<a href="https://google.com" target="_blank">Google</a>

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

<script>
document.querySelectorAll("a").forEach(link => {
  link.setAttribute("target", "_blank");
});
</script>

Similar Reads