If you want to optimize the user experience on your website, especially when you want to keep a user moving down an initial page, you’ll want to give users the option of opening links on the page in a new tab. While this isn’t always the right move, it can help ensure users don’t simply leave and forget about your page if you want to keep users engaged with a particular page or process.
Depending on whether you use HTML or JavaScript through website hosting, there are a couple of different ways to force users to open links in new tabs using specific code.
When to Have Users Open a Link in a New Tab
Often, websites have users open links in the same browser window, such as when reading a blog post or other website content that includes hyperlinks with anchor text, or referential links at the bottom of the page. However, this isn’t always the best policy to have in place for browsing, as it could take users away from a page and keep them away if webmasters aren’t careful.
Generally, it’s best to force links to open in new tabs if opening the link on the same page will disrupt a particular process. For example, someone may be in the middle of completing an order form, watching a video, or otherwise actively engaging with a page. Having users open links in new tabs will ensure their progress on a previous page isn’t lost and that they can easily return to it.
At the same time, if you’re going to open links in new tabs, you should do so consistently. Users could be put off if they click on one link that takes them to a new tab, only to find that another link completely redirects them from the original page. Ensure that users know what to expect whenever they click on a link, whether it’s a consistent experience across a single page or your entire website.
Thankfully, it’s easy to get users to open links in new tabs with the right coding techniques using either HTML or JavaScript.
How to Open Links in New Tabs Using HTML
Many web pages and sites use HyperText Markup Language (HTML) to develop and publish the content on websites. Using this markup language, it’s easy to force links to open in new tabs using basic code.
Specifically, when using HTML, you would set the <a> tag’s “target” attribute to “_blank.” Doing so will ensure that users open the link in a new tab on the page.
This process works based on the following key elements:
- The Anchor: The <a> tag incorporates the anchor text that connects to the designated internal or external link on the page. This tag would look like the following when wrapped around the code: “<a href=”www.websitelink.com/”>Anchor text</a>”
- The Reference Link: The “href” element in the link determines the specific address that the anchor text will link to and directly precedes the link.
- The Target: The target attribute determines the manner in which the user’s browser opens the hyperlink on the page. It will look like this when attached to the above example link: “<a href=”www.websitelink.com/” target=”_blank”>Anchor text</a>”
Preventing Security Issues With HTML Links
To prevent potential phishing threats known as tabnabbing, which entail hijacking links to bring users to a fake login page to steal user credentials, you’ll want to include a specific safeguard in your links. This safeguard involves adding a “rel=”noopener noreferrer ” attribute to your link within the <a> tag.
Using the above example link, this safety measure would look like this: “<a href=”www.websitelink.com/” target=”_blank” rel=”noopener noreferrer”>Anchor text</a>”
How to Open Links in New Tabs Using JavaScript
You can also use JavaScript to make links open in new tabs using simple code. Using this programming language, you would use the “window.open(URL, target)” code to get the link to open in a new tab, using a second parameter for the “_blank” target attribute. However, you’ll want to avoid the use of a third parameter using this method, or the link will open in a new window.
The setup for opening links in new tabs using JavaScript would look like the following:
<html> <head> <title>Anchor text</title> </head> <body> <buttononclick=”openTab()”>Anchor text</button> <script> function openTab(){ window.open(“https://www.websitelink.com/”, “_blank”); } </script>
</body> </html>
This technique involves the following aspects:
- The Onclick Attribute: This is an event attribute that uses the “onclick” designation to open a new tab using “openTab()”, ensuring users go to a new tab when clicking on a link or button.
- The Script Tag: Incorporating the <script> tag indicates the scripting language on the page.
- The “window.open()” Method: This function opens either a new tab or window, based on the next element.
- The Target Attribute: Like in HTML, you would include a “target” attribute in the code to designate a target destination after clicking a link/button. To open the link in a new tab, the target should be set to “_blank.”
Get Help With Web Development and More from Vigor Seorchers
Whether your website uses HTML or JavaScript programming languages, you can create a more seamless user experience by having links open in new tabs. However, this can be a time-consuming process, especially if you have many pages, links, and other development tasks to create the perfect experience across your website.
If you would like some help with web design and other aspects of your digital marketing, reach out to the experts at Vigor Seorchers today.
Wow! This blog adeptly tackled the common yet crucial task of opening links in a new tab using HTML and JavaScript, demystifying the process with clarity and precision.
I’ve been trying to implement this feature on my website, but I’m running into some issues. I’ve tried both the HTML target=”_blank” attribute and JavaScript, but neither seems to be working as expected. Could you please provide a more detailed example or troubleshoot common problems that might arise during implementation?
This article is a great refresher! I always use the HTML method, but the JavaScript approach is useful for more interactive elements. Would love to see more posts like this!
I appreciate, cause I discovered just what I was having a look for. You’ve ended my four-day lengthy hunt! This is a helpful guide! Opening links in a new tab is a fundamental web development trick that enhances user navigation.
God bless you, man. Have a great day