Skip to content
Accessibility HTML and CSS

The Difference Between target=_blank and target=blank

4 min read

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>
© 2024 Andy Carter