Opening External Links in Another Window: Evil or Convenience?

When someone clicks a link to an external site, should that link open in a new tab or browser window, or should it replace the contents of the current browser window?

This is a question that web standards advocates and site owners have been at odds over since the early days of the web.

The HTML attribute that allows this, target="_blank", was deprecated in HTML 4.0.1 and XHTML 1, which means that it still works but is frowned upon. But now, in HTML5, it has been given a reprieve and is no longer deprecated.

Good or Bad for Usability?

So let's put aside the standards issues and focus on whether this is a good way for web sites to behave, or not.

The "anti-target" camp, which includes many top designers, says you should not take this control away from the user. If they want the link to open in a new tab or window, they can hold down the Control or Command key and get this behavior. But if you put target="_blank" on a link, then you take away the option to open the link in the same window. You also "break" the back button, since the user can't click the back button in the new window to get back to where they started.

I understand this argument, but I disagree. Suppose you are reading this blog post, and I give you a link to Jacob Neilsen's 1999 article in which he rants against opening links in new windows. Do you intend to leave this site to read that article? I don't think that's likely. It's more like opening up a sidebar, so having it automatically open in a new tab is a convenience. Closing that tab or window is just as easy as clicking the back button. Now that nearly all browsers support tabs, I think the arguments against target="_blank" are weakened; somehow a new tab feel like less of an imposition than a new browser window.

And regardless of what I think, most of the clients we've built sites for want this behavior. Some designers and standardistas may argue that it is our job to talk them out of it, but that's not my view.

On to Implementation

You may choose to use target="_blank" or not; I don't see this as a religious issue, but a matter of personal preference. For this site, we've chosen to have all external links open in a new window.

This brings us to the practical question of how to implement this, assuming you have chosen to do so. For a while, we entered target="_blank" on every link we wanted to open in a new window. But this gets tedious quickly, and it's easy to miss some.

Fortunately, jQuery makes it simple to completely automate this. Adding the attribute using JavaScript also allows your page to validate as HTML 4.0.1 Strict or XHTML 1, if that matters to you. The browser still sees the attribute, but the validator (which ignores the JavaScript on the page) doesn't.

Here's the code we've added to the head section of our pages, in a "document ready" block:

$("a[href^='http']:not([href*='webvanta.com'])").addClass("external").attr({ target: "_blank" });

This statement says to add the class of external and the attribute of target="_blank" to every anchor element where the reference begins with http and does not include "webvanta.com". The external class allows us to style the external links differently.

We specifically test for the domain name because we include the full path on links even within our site so content in RSS feeds works properly. If all of your internal links are relative, then you can simply test for the presence of http and omit the domain name test.

If you're already loading jQuery and you have a document ready block in the head, just add this one line to that block. Or, if you don't have any of this set up, here's the complete set of code, including loading the jQuery library from Google's CDN:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("a[href^='http']:not([href*='webvanta.com'])").addClass("external").attr({ target: "_blank" });
  });
</script>