How to make the link open in a new tab (HTML tag)

In this article, I will show you how to make the link open in a new tab, better known as the <a> tag, only with the native resource of HTML itself.

We know that the conventional way of adding links to a particular page/URL replaces the current page.

However, some projects have the requirement that the current tab remains and the link opens on a new page.

This happens a lot when we are sending the user to a page that changes the context or is another site.

<a> tag structure

First, let’s remember what constitutes a link tag

<a href="https://www.google.com">Go to Google</a>

We must open and close the tag, and insert the href attribute, which will contain the destination URL.

Also, we’ve added text that is what the user reads and also gets the style markup that the HTML has for this tag.

Now let’s see what needs to change, so when the user clicks the page it will open in a new tab.

<a href="https://www.google.com" target="_blank">Go to Google in new page</a>

To solve this problem we add the target attribute with the value _blank

Just with this action, the HTML itself will be in charge of opening a new tab for the user, do the test! 😀

It’s funny how simple this solution is, but sometimes unknown.

And we often think that we have to solve this kind of problem with JavaScript, due to ignorance of this native feature.

Many of these simple ‘problems’ are sometimes solved in alternative ways that are not so performative…

In this article we saw that to forward the user to another link, opening in a new page, we must add the parameter target=”_blank”

He will take care of doing this function for us, natively and very clean in the code.

Also, if you want to go back to the traditional way, just delete this attribute from the <a> tag

And so we learned how to make the link open in a new tab, until the next post!

If want to know more about HTML and CSS, click here!