HTML target=”_blank” Link Tutorial with Examples
HTML provides the
<a> element or tag in order to create links to the other pages, URL or part of the same page. While creating a link we can set the style of the link like open in the same browser tab or page or in a new browser window or tab. We can open given link in a new browser window or tab by using the
target="_blank" attribute of the <a> element.
Why Open A Link In A New Window or Tab
There are some good reasons to open a link in a new window or tab.
- There may a user-initiated media playing like a video or sound. Opening a link on the same page will interrupt the user’s media experience.
- The user is working on the page and changing page will cause loss of work or data.
Why Not Open A Link In A New Window or Tab
Well, there are some reasons which make the opening a link in a new browser tab or window.
- The first reason is that we like to open links in a new window or tab. The default behavior of the link is opening in the same window or tab without creating a new one. This can be a bad reason where users generally stick to the default behavior with links.
- The second reason maybe we do not want our users to leave our web site by creating multiple windows or tabs for our web page. This can be related to branding.
- The third reason is processing internal and external links differently. We can behave the external links differently and open then in a new tab or window.
- The fourth reason is providing a download link like a PDF.
HTML Link with <a> Element
The HTML <a> link element with
target="_blank" is supported by all major modern web browsers like Google Chrome, Microsoft Edge, Internet Explorer, Mozilla Firefox, Safari, and Opera. The syntax of the
target="_blank" is like below.
<a href=URL target="_blank">
URLis the new address, URL or web page we want to open in a new browser window or tab.
Open Link In A New Window or Tab with _blank
We will use the
target="_blank" attribute in the following example where the given
href value or URL
https://www.poftut.com will be opened in a new tab or window.
<a href="https://www.poftut.com" target="_blank">
target=”_blank” vs target=”_new”
In some examples we can see that
target="_new" is used with a similar function with
target="_blank". According to standards like HTML, HTML 5, HTML 4 etc there is no attribute like
target="_new". But modern browsers provide applications about the
target="_new" even not a standard. Both attributes will function like the same where
target="_new" will search for the tab with the name
new and if not found new tab or window will be created and the link URL will be loaded.
The newly opened window or tab can be changed with the
window.opener.location to some phishing age. The user trust the opened page as he will think that the page is genuine. We can stop this type of attacks and secure the
target="_blank" attributed links with the
rel="nooper noreferrer" attribute like below.
<a href="https://www.poftut.com" target="_blank" rel="noopener noreferrer">