How to Open Links in a New Tab Using HTML and JavaScript

by | Jan 10, 2024

Introduction How to Open Links in a New Tab Using HTML and JavaScript

Have you ever clicked on a link and wished it would open in a new tab instead of navigating away from the current page? Well, you’re in luck! In this blog post, we’ll guide you through the simple process of opening links in a new tab using HTML and JavaScript.

To make a link open in a new tab using HTML, we add a special instruction in the link’s starting <a> tag. We use the target attribute and set it to _blank. So, when someone clicks on the link, the website opens in a fresh tab. It’s that easy!

HTML

Let’s start with the HTML markup. In your HTML file, locate the link you want to open in a new tab and add the target attribute to it. Set the “target” attribute to “_blank,” and this will instruct the browser to open the link in a new tab.

1
<a href="https://www.example.com" target="_blank">Visit Example.com</a>

If you want to enhance the user experience further or have more control over link behavior, you can use JavaScript. Below is a simple example using JavaScript to open links in a new tab when clicked.

The <a> element in HTML helps add web addresses, known as URLs, to websites.

The href attribute decides where the user goes when they click the link. For example, the URL https://www.example.com/ is the href value.

The target attribute decides how the link opens. When set to _blank, it opens in a new tab.

The text between <a> and </a>, like ‘Visit Example.com,’ is what you see as the clickable link on the page.

Safety Tip for target=’_blank’

I advise always adding rel="noreferrer noopener" to your link (anchor) when using ‘target.’ This ‘rel’ attribute sets a safety relationship with the linked URL. Adding ‘noopener noreferrer’ helps guard against a phishing trick called tabnabbing.”

What is tabnabbing?

Tabnabbing, also known as reverse tabnabbing, is a trick that takes advantage of how browsers behave with target="_blank". It uses this to gain partial access to your page through the window.object API.

In tabnabbing, a page you link to can make your page redirect to a fake login page. Most users might not notice because the focus is on the newly opened tab, not the original one with your page.

Later, when someone switches back to your tab, they might see the fake login page instead and unknowingly enter their login details.

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  // Get all the links on the page
  const links = document.querySelectorAll('a');
 
  // Attach a click event listener to each link
  links.forEach(link => {
    link.addEventListener('click', function(event) {
      // Prevent the default link behavior
      event.preventDefault();
 
      // Open the link in a new tab
      window.open(link.href, '_blank');
    });
  });
</script>

Inside openTab(), we use window.open() to create a new tab. We specify the website link. The ‘target’ attribute is set to ‘_blank’, ensuring the link opens in a new tab.”

Conclusion

And that’s it! You’ve successfully learned how to open links in a new tab using HTML and JavaScript. Whether you prefer a simple HTML approach or want to add some styling and interactivity with CSS and JavaScript, these techniques will give you the flexibility to create a better browsing experience for your users. Feel free to experiment and adapt these methods to suit your website’s needs. Happy coding!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Looking For Something?

Follow Us

Related Articles

How to Solve Hydration Errors in Next.js: A Comprehensive Guide

How to Solve Hydration Errors in Next.js: A Comprehensive Guide

Hydration errors in Next.js can be frustrating for developers, especially when building server-side rendered (SSR) or static site generation (SSG) applications. These errors often occur when the client-side React rendering doesn’t match the server-side rendered HTML,...

React 19: What’s New and How to Upgrade Your App

React 19: What’s New and How to Upgrade Your App

React has been a go-to JavaScript library for building user interfaces, and with its continuous evolution, it always brings in fresh updates and improvements to make our development process smoother. With the stable release of React v19, many exciting features have...

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!