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.
Table of Content
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:[email protected]" 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
_blankto open a new tab and use relnoopenerto limit access. - Test your links across main browsers to confirm the behavior.
FAQs
How do I open a link in a new tab in HTML?
<a href="https://example.com" target="_blank">Visit Site</a>rel="noopener noreferrer" for better security.What does target="_blank" mean in HTML?
<a href="https://google.com" target="_blank">Google</a>Should I use rel="noopener noreferrer" with target blank?
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Safe Link</a>- Prevents security risks
- Stops performance issues
How do I make all links open in a new tab?
<script>
document.querySelectorAll("a").forEach(link => {
link.setAttribute("target", "_blank");
});
</script>
- This updates every link on the page
- Works dynamically
Similar Reads
The <footer> tag defines a footer section in HTML. It creates a clear endpoint for a page or section. Browsers…
The HTML sup tag puts text above the normal line. Writers use it for math power and marks. So, readers…
HTML attributes add extra detail to elements so the browser knows how to handle them. Here you will see examples…
HTML builds the base for every web page. It sets structure and meaning so the browser knows what to show.…
The HTML em tag shows stress or emphasis in text. It changes meaning for readers and screen readers. What is…
The <output> tag in HTML shows results inside a form. It helps display values from user actions or scripts. You…
The script tag adds JavaScript to a web page in HTML. This lets the page run logic or load content.…
The link tag in HTML connects a web page to external resources like stylesheets or icons. It's placed in the…
The iframe tag embeds another HTML page inside the current page. It loads content from a separate source. Understand the…
The HTML lang attribute tells browsers and tools what language the page uses. It helps users and search engines understand…
