How to open link in new tab html

How to Open a Link in a New Tab in HTML

Did you notice on some websites where when you click a link — it will open a page in a new tab? And you want to know how to do this trick. In this article, you will learn how to do by following these three easy steps.

Step 1: Create the link

The first step is to create a link in the HTML file. Start by adding the a element and set the href value to the link address. In this example below, the link will open a Coderslang blog in the same tab.

a href="https://learn.coderslang.com/">Go to Coderslang bloga> 

Step 2: Add the target attribute

The next step is to add the target attribute to the link.

target is the HTML attribute that tells the browser where to open the link. The target can be in the same tab or a new tab.

In the example below, we add the target attribute to the link and set the target value to _blank . The _blank value is what will make the linked document open in a different tab.

a href="https://learn.coderslang.com/" target="_blank">Go to Coderslang bloga> 

If you go back now and click the link again, it will open the Coderslang blog in a new tab!

Step 3: Add the no referrer and no opener to the link

One last step is to add the rel=»noreferrer noopener» attribute to the link. That is because the target attribute makes your link vulnerable to phishing attacks, and you do not want this to happen to your users.

a href="https://learn.coderslang.com/" target="_blank" rel="noreferrer noopener">Go to Coderslang bloga> 

By adding the no referrer and no opener to the link, your users will be safe and prevent possible phishing attacks from bad people.

Conclusion

And there you go! You now know how to open the link in a new tab using the target=»_blank» attribute. Always make sure to include the no referrer and no opener whenever using the target attribute to keep your link safe from malicious attacks.

I hope you find this tutorial helpful and happy coding!

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

Источник

How to Use HTML to Open a Link in a New Tab

Kris Koishigawa

Tabs are great, aren’t they? They allow the multitasker in all of us to juggle a bunch of online tasks at the same time.

Tabs are so common now that, when you click on a link, it’s likely it’ll open in a new tab.

If you’ve ever wondered how to do that with your own links, you’ve come to the right place.

The Anchor Element

If you click on the link above, the browser will open the link in the current window or tab. This is the default behavior in every browser.

To open a link in a new tab, we’ll need to look at some of the other attributes of the anchor element’s other attributes.

The Target Attribute

This attribute tells the browser how to open the link.

To open a link in a new tab, just set the target attribute to _blank :

Now when someone clicks on the link, it will open up in a new tab, or possibly a new window depending on the person’s browser settings.

Security concerns with target=»_blank»

I strongly recommend that you always add rel=»noreferrer noopener» to the anchor element whenever you use the target attribute:

This results in the following output:

The rel attribute sets the relationship between your page and the linked URL. Setting it to noopener noreferrer is to prevent a type of phishing known as tabnabbing.

What is tabnabbing?

Tabnabbing, sometimes called reverse tabnabbing, is an exploit that uses the browser’s default behavior with target=»_blank» to gain partial access to your page through the window.object API.

With tabnabbing, a page that you link to could cause your page to redirect to a fake login page. This would be hard for most users to notice because the focus would be on the tab that just opened – not the original tab with your page.

Then when a person switches back to the tab with your page, they would see the fake login page instead and might enter their login details.

If you’re interested in learning more about how tabnabbing works and what bad actors can do with the exploit, check out Alex Yumashev’s article and this one by OWASP.

If you’d like to see a safe working example, check out this page and its GitHub repo for more information about the exploit and the rel attribute.

In summary

It’s easy to use HTML to open a link in a new tab. You just need an anchor ( ) element with three important attributes:

1. The href attribute set to the URL of the page you want to link to,
2. The target attribute set to _blank , which tells the browser to open the link in a new tab/window, depending on the browser’s settings, and
3. The rel attribute set to noreferrer noopener to prevent possible malicious attacks from the pages you link to.

Again, here’s a full working example:

Which results in the following output in the browser:

Thanks again for reading. Happy coding.

Источник

How to Open a Link in a New Tab – HTML target blank Attribute Explained

There will be times where you will want your user to click on a website link and have it open in a new browser tab. But how do you do that in HTML?

In this article, I will show you how to use the target=»_blank» attribute through code examples. I will also talk about when you should consider using this attribute.

How to Open Up a New Browser Tab Using target=»_blank»

The target=»_blank» attribute is used inside the opening anchor tag like this:

When the user clicks on the link, a new browser tab will automatically open to that page.

In this example, I have nested a link inside a set of paragraph tags to direct people to freeCodeCamp.

When you click on the freeCodeCamp link, then it will open up a new browser tab for you.

If I were to omit the target=»_blank» attribute, then the default behavior would be to leave the current web page and go directly to the link without opening a new browser tab.

What is the noopener Keyword?

The noopener keyword in the rel attribute is used primarily for security reasons to prevent malicious users from messing with the original web page through the Window.opener property. If the malicious user gained access to your window object then they could redirect your page to a malicious URL.

You can use the noopener keyword as a way to help prevent that security issue from happening. Here is how the noopener keyword is used:

If you want to learn more about the security concerns that rel=noopener helped solve, then please read through this helpful article.

Updates to the noopener keyword

In 2021, there was an update made where modern browsers now set rel=noopener to any link using the target=_blank attribute. As you can see in this Can I use table, the noopener keyword is supported by most browsers except for Internet Explorer 11.

Even with this update, a lot of developers will still use rel=noopener for links using the target=_blank attribute.

Should You Use the target=»_blank» Attribute All the Time?

When users click on a link, the default behavior is to have that link open on the current page they are on without opening a new browser tab. In a lot of cases, you do not want to change this default behavior because users have grown to expect this.

You have to think carefully about when it would be a good time to use the target=»_blank» attribute. One good example would be if a user is working on a page and they don’t want to leave that page if they click on a link.

In this example, we are linking to the DevDocs documentation, so the user can stay on their current page and look up a reference on a new tab.

Conclusion

You can use the target=»_blank» attribute if you want your users to click on a link that opens up a new browser tab.

The target=»_blank» attribute is used inside the opening anchor tag like this.

The noopener keyword in the rel attribute is added to prevent malicious users from messing with the original web page through the Window.opener property.

You have to think carefully about when it would be a good time to use the target=»_blank» attribute because you don’t want to always change the default behavior of links.

I hope you enjoyed this article and best of luck on your programming journey.

Источник

Opening a link in a new browser tab with HTML

Have you ever clicked a link on a website, and it’s opened on a new tab in the browser? If you’ve been wondering how you can do that with your links, this article will act as your guide.

Prerequisites

• A web browser (I’m using Google Chrome).
• Basic understanding of HTML tags and attributes.
• A text editor (I’m using Visual Studio Code).

Introduction

What is the tag?

What are attributes?

Attributes in HTML are special words used inside the opening tag of an element to control the element’s behavior. HTML attributes are a modifier of an HTML element type.

What do the href and target attributes do?

• href — Specifies the URL of the page the link goes to
• target — Specifies where to open the linked document

Using the “href” attribute

The href attribute specifies the URL of the page the link goes to when it’s clicked. Below is an example of how to use the href attribute within the element:

 href="https://www.dev.to/devwraithe">My profile 

• Page 1:
• Page 2, opened in the current tab:

Using the “target” attribute

The target attribute specifies where to open the linked document. If the link is clicked while the target attribute is present, the value of the target attribute will instruct the browser on where it will open the link.

 href="https://www.dev.to/devwraithe" target="_blank">My Profile 

• Page 1:
• Page 2, opened in a new tab:

Security concerns and the target=”_blank” attribute

It is recommended that whenever the target=»blank» attribute is present in an anchor element, you should include the rel=»noopener noreferrer» attribute to prevent a type of phishing known as Tabnabbing. The rel attribute helps to specify the relationship between the current document and the linked document.

Conclusion

It’s straightforward to use the HTML anchor element to open links in a new browser tab. As you have learnt in this article, all you need are three simple, easy-to-remember attributes:

• The href attribute sets the URL of the page you want to link to.
• The target attribute is set to “_blank” to tell the browser to open the link in a new tab (or window, depending on the browser settings).
• The rel attribute is set to “noreferrer noopener” to prevent malicious attacks from the pages you link to.

If you have any questions concerning this article or other frontend-related topics, do not hesitate to contact me either on Twitter or LinkedIn.

Источник