Select Page

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.

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

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 create Bootable USB and install Ubuntu

How to create Bootable USB and install Ubuntu

Deciding which version of Linux to put on your computer can be hard because there are a lot of options, and each one has its own unique features. One choice that many people like is Ubuntu. Some say it's one of the top Linux options out there. It's easy to use, you...

Network throttling

Network throttling

What is Network throttling? Network throttling means purposely slowing down internet speed. It's used in web performance to mimic slow internet connections that many users might have. This helps test how a website performs under those conditions. How to Slow Down...

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!