What is the difference between
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.
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
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),
_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.
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
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
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.
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>
Now that we've established the difference of the target values
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>