It is good to know when to create internal and external links on a web page because not all scenarios can be treated the same. To clarify, there are links that open in the same browser tab and links that open in a new browser tab. Today, the question is when to configure your link to open in the same browser tab and when to configure your link to open in a new tab or window. Before you try to answer this question, there are many things you need to take in consideration when you creating links on your website.
This blog post provides the information you need before deciding what type of link you want to create on your website.
Depending on the context, here is my approach
- All of my external links open in a new browser tab because I don’t want anyone to leave my website. So, if every external webpage opens in the same tab on your website, you need to do it differently because you are killing your website traffic.
- Usually, a link in the same website opened in the same tab, but if you have more than one app on your website, you need to open the link for each app on a new tab. For example, on this website, all the links to my pages or posts open in the same tab, but if I ask to search for something in my bookmark, I will make the link open in a new tab because I will be waiting for the person to come back to finish reading my blog post (See footnote).
How to make a link open in a new tab
To make the browser open a new tab or window (depending on the user preference), you need to add the target attribute and set the value to _blank in your html code. Below is an html example how to open a link in a new tab.
<a href="https://htopskills.com/spin-the-wheel" target="_blank">Spin to Win</a>
For an external website, it is best to build the link this way:
<a href="http://modernitconsulting.net" target="_blank" rel="noreferrer noopener">Modern IT Consulting</a>
Note: If you are using a system like WordPress to create a link and you check “open new tab” they will add rel = “noreferrer noopener” in your code but you don’t need this part for a link that is in the same origin (link in your website). However, for security reasons, it is recommended to add rel=”noreferrer noopener” on external links, as noreferrer prevents your website from passing information to a new tab and the noopener prevents a malicious website to gain access to the origin (more info can be found in “Links to cross-origin destinations are unsafe“).
What To Read Next
- How to set CSS styles with jQuery
- How to install XAMPP in Windows 10
- Embed youtube playlist on webpage
- How to install Among Us on Windows 10
If you like the content of this post or if it has been useful to you, please consider sharing it on your social media and follow me on Facebook and Twitter for more exclusive content.