HTML target=”_blank” Link Tutorial with Examples – POFTUT

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.
LEARN MORE  How To Link/Add External CSS To HTML with Tag Tutorial with Examples?

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">
  • `URL` is 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 will be opened in a new tab or window.

<a href="" 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.

Secure target=”_blank”

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="" target="_blank" rel="noopener noreferrer">

Leave a Comment