What is the difference between target=_blank
and target=blank
? It’s a question that seems to crop up every now and then. At first, they both appear to do the same thing, open a link in a new tab (or window). However, omitting that little underscore makes an important difference.
The target attribute
target
is an optional attribute of an anchor tag. It is used to determine where a linked URL will open within the current browsing context. By browsing context we are referring to a tab, a window or an iframe
.
target=_blank
If we give a link element the attribute target=_blank
, every time the link is clicked it will always open the link in a new tab. I say tab, but it is worth bearing in mind that users can configure browsers to open a new window instead.
_blank
is one of several reserved target attribute values, all denoted by a preceding underscore. Others include _self
(the default behaviour of an anchor element), _parent
and _top
.
Apart from _blank
, the other reserved target attribute values are rarely used these days. If you're interested in how the other values work take a look at the anchor element documentation on MDN.
target=blank
When we omit the underscore, we are telling the browser to open the link in a tab called 'blank' instead of opening a new one. If the 'blank' tab doesn’t exist yet, then the browser will create it and open the link in the newly created tab. This is why target=blank
can at first appear to work the same as target=_blank
.
In the early days of the web and HTML, using named targets like this was far more common than it is today. Back in the 90s a popular technique for creating interesting page layouts was through the use of frames. Netscape gave us the frame
and frameset
tags, whilst Internet Explorer gave us the iframe
tag (the joys of the first browser war). You might have defined your site's primary navigation in one frame and wanted the links to open in another. By naming the frames you could use the target
attribute to determine which frame to open a link.
An Example
To understand the difference between the two target attribute values better, let's look at a simple example.
<ol>
<li>
<a href="https://facebook.com" target="_blank">
This link will open in a new unnamed tab/window
</a>
</li>
<li>
<a href="https://twitter.com" target="blank">
This link will open in a tab/window named 'blank'
</a>
</li>
<li>
<a href="https://instagram.com" target="_blank">
This link will open in another new unnamed tab/window
</a>
</li>
<li>
<a href="https://youtube.com" target="blank">
This link will open in the tab/window named 'blank'
</a>
</li>
</ol>
target=_blank or target=blank
Now that we've established the difference of the target values _blank
and blank
, you might think the latter has advantages over always opening a new tab. However, I'd advise avoiding this as a technique.
To start with, the W3 recommended against opening links in a new tab:
In general, it is better not to open new windows and tabs since they can be disorienting for people, especially people who have difficulty perceiving visual content.
If you use a named target like target=blank
this can lead to further confusion as the links will be changing the content of a tab other than the one you are currently viewing (as opposed to opening a new tab).
If you must open links in a new tab, continue to use target=_blank
, but make it clear that the link will open in a new tab. Again, the W3 have this to say on the matter:
It is recommended that when links are opened to a new window, there is advance warning.
By advanced warning, it means having some text that clearly states that the link will open a new tab:
<a href="https://example.com" target="_blank">
example link (opens in a new tab)
</a>