If you created a static HTML web page and inserted links, they will open in the same window after you click any of them. This is the default behavior of any web browser.
But if you want to open a link in a new tab in your HTML web pages, you came to the right spot.
You can create a simple link in HTML using an anchor tag:
<p>Example: <a href="https://shihabiiuc.com/">This link</a> will open the web page within the same window.</p>Example: This link will open the web page within the same window.
In the above example, the “<a></a>” represents the anchor tag. And it has a “href” attribute that carries the actual link of another web page.
How to open HTML links in a new tab?
In the above example, you see that the link is opening within the same window by default.
But if you want your visitors to open a link in a new window without leaving the current page, you have to use another HTML attribute which is the “target.”
Just like the “href” attribute, you also have to use the “target” attribute within the “<a> tag” (see the example below).
<p>Example: <a href="https://shihabiiuc.com/" target="_blank">This link</a> will open the web page in a new tab.</p>Example: This link will open the web page in a new tab.
As you see in the above example, the “target” attribute has a value of “_blank” and this value is mandatory if you want to open the link in a new tab or browser window.
That means, if you want to open an HTML link in a new tab, you have to insert a “target” attribute and set its value to “_blank“
The “target” attribute has 5 different values:
- _self
- _blank
- _parent
- _top
- framename
“_self” is the default value. If you don’t assign any “target” attribute to a link, it means that the link has a target attribute of “_self”
And the target attribute of “_blank” opens a link in a new tab that I explained earlier.
Best practice of using the <a target=”_blank”> attribute
You don’t need to worry if you’re linking to your website or if you insert an internal link. But a target=”_blank” attribute can be dangerous for certain external links.
Because the external link gets some sort of access to your web page using DOM.
For example, you linked to my website from your HTML webpage and you used the target=”_blank” attribute. In this case, I will get access to your website/webpage. Though this access is limited, it’s enough to manipulate user requests. Even I could receive the visitors’ data instead of showing the actual page you linked to mine.
This is just an example of vulnerabilities.
So if you want to protect your visitors from phishing and fix the target”_blank” attribute.
How to fix <a target=”_blank”> vulnerabilities?
To fix the security issues, you have to assign another that is “rel” attribute with a value of “noopener“. It refers to the relationships between your website and the external website (that you linked to).
<p>Example: <a href="https://shihabiiuc.com/" target="_blank" rel="noopener">This link</a> will open the web page in a new tab & make it secure.</p>Example: This link will open the web page in a new tab & make it secure.
The rel=”noopener” attribute prevents the browser to grant any access from the external website (that you linked to).
Firefox 63 & newer versions also support this rel=”noopener”
But older browsers will not support it. So it’s recommended that you also use “noreferrer” at the same time. So the final link will be:
<p>Example: <a href="https://shihabiiuc.com/" target="_blank" rel="noopener noreferrer">This link</a> will open the web page in a new tab & make it secure in all web browsers and including old Firefox.</p>Example: This link will open the web page in a new tab & make it secure in all web browsers and including old Firefox.
Conclusion
To open a link in a new tab, insert the target=”_blank” attribute in the <a> tag (as you see below).
<a href="example.com" target="_blank">Link</a>To prevent granting access from the external website, use rel=”noopener noreferrer” in the same link where you used target=”_blank” attribute (as you see below).
<a href="example.com" target="_blank" rel="noopener noreferrer">Safe Link</a>But you don’t need to mention the “rel” for internal linking.
See also:
How to create a download HTML link?
How to insert an image in HTML?
