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.
Use target="_blank"
to Open Link in 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 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