Altcademy - a Forbes magazine logo Best Coding Bootcamp 2023

How to open link in new tab HTML

Understanding the Basics

As a beginner, the world of programming can seem vast and intimidating. But fear not, as we dive into this tutorial, you'll soon realize that it's actually pretty simple to open a link in a new tab using HTML. For the sake of this tutorial, let's consider HTML as a language that communicates with the browser to tell it what and how to display content.

Before we dive into the "how," let's understand the "what." When we say "open a link in a new tab," we mean that when a user clicks on a link on your webpage, instead of the link opening in the same tab (and hence replacing your webpage), it opens in a new tab in the browser. This leaves your webpage open and the user can easily return to it by simply switching tabs.

Think of it like reading a book and coming across a reference to another book. Instead of having to put down your current book to go and read the other one, you can simply open the new book in a different tab (in our case, a different browser tab), read it, and then return to your original book without having to search for it again.

The 'target' Attribute in HTML

The key to opening a link in a new tab in HTML lies in a specific attribute: 'target'. An attribute in HTML is used to define the characteristics of an element. In our case, the 'target' attribute defines where the linked document will open.

Now, let's see a simple example. Here's the HTML code for a basic link:

<a href="">Visit</a>

In the above code, <a> is known as the 'anchor' tag, href is an attribute that tells the browser where the link goes to, and "Visit" is the clickable text that the users see.

Using the '_blank' Value with 'target' Attribute

To open the link in a new tab, we add the 'target' attribute with the '_blank' value to our anchor tag. This tells the browser to open the linked document in a new window or tab. Here's how it looks:

<a href="" target="_blank">Visit</a>

With the above code, when a user clicks on "Visit," it will open in a new tab.

Other 'target' Attribute Values

While '_blank' is what we use to open a link in a new tab, there are other values that 'target' attribute can take:

  1. _self: This is the default value if the 'target' attribute is not specified. It opens the linked document in the same window or tab as it was clicked.
  2. _parent: This opens the linked document in the parent frame.
  3. _top: This opens the linked document in the full body of the window.

A Note on User Experience

While opening a link in a new tab can be useful in keeping users on your page, it can also lead to a clutter of open tabs. Hence, it's important to use this feature judiciously. A good rule of thumb is to use it when opening a new tab enhances user experience or when you're linking to external sites.

Wrapping Up

Congratulations! You've learned how to open a link in a new tab using HTML. It's amazing to see how a simple attribute can change the way a link behaves. As you continue your journey in HTML, you'll come across many such attributes that give you more control over elements on your webpage. Happy coding!