How to Open Link in New Tab in HTML

Sushant Poudel Feb 02, 2024
How to Open Link in New Tab in HTML

This article will discuss a method to open a link in a new tab in HTML.

We can use the target attribute in the anchor tag to open a link in a new tab in HTML. The _blank value in the target attribute of the anchor tag opens the link in the new tab. The anchor tag <a> defines a hyperlink used to link from one page to another. The href attribute sets the URL of the page you want to link to. The option target="_blank" switches the link to the new tab. The value _blank informs the browser to open the link in a new tab, depending on the browser’s settings. We can add the rel attribute in the anchor tag with the value noopener noreferrer as a security measure. The rel=" noopener noreferrer" is to prevent the newly opened tab from being able to modify the original tab maliciously. However, the modern browsers set the option implicitly when we use the target= "_blank" option.

For example, inside the HTML body, open the anchor tab <a> and type the href attribute inside it. Write the URL https://www.facebook.com/ as the value of the href attribute. Then, write target as the attribute of the anchor tag and give it a value _blank. After it, write the rel attribute with the value noopener noreferrer. Then write the text Link between the anchor tag. At last, don’t forget to close the anchor tag followed by the body tag.

The example below opens a new tab when we click the word Link. It opens the Facebook page when we click on the link.

Example Code:

<body>
    <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer" >
        Link
    </a>
</body>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn