Opening Links in a New Tab
To open a link in a new tab in HTML, add the target="_blank" attribute to your a tag. This tells the browser to open the linked document in a new window or tab.
Opening links in a new tab can be quite handy when you want to send users to an external website without them losing their place on your site. This way, they can simply close the new tab to return to your page.
Basic Syntax
Here is how you add the target attribute to a link:
Security and Performance (rel="noopener")
When you use target="_blank", it is a best practice to also include the rel="noopener" attribute. This provides two important benefits:
- Security: It prevents the new page from being able to control the original page via the
window.openerproperty. - Performance: It allows the new page to run in a separate process, which ensures that it won't slow down your original page.
Here is a link with both attributes:
Use Sparingly
While it might be tempting to open every link in a new tab, it can be annoying for users if overused. It's generally best to save this for external sites. For internal links on your own site, it's usually better to let the user decide how they want to open the link.
Full Example
Here is a working example showing a standard link and one that opens in a new tab: