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.

<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

<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!