Bruno Abrantes

If you build websites and enjoy coding according to Web Standards, then you’re probably aware that the XHTML 1.0 Strict specification leaves out a rather common attribute: target, which is used inside <a> tags to specify how the hyperlink should behave. With a value of “_blank“, the hyperlink would open in a new browser window (or tab), which is recommended if the link navigates away from the current site.

Fortunately, if you wish to keep this behavior and validate against the XHTML 1.0 Strict specification, there’s an easy solution: use Javascript. For this tutorial, I’ll use jQuery, the ever-so popular Javascript framework. Why? Because of it’s CSS-like structure, jQuery lets you pull this technique off in a rather clean and beautiful manner.

First off, in your markup, add a custom class to your <a> element, like this:

<a class="external" href="http://www.google.com">Google</a>

Then, in your main Javascript file (I usually keep a functions.js file where I write all of my miscellaneous functions) you just need to add this snippet of code:

$(function(){
    $('a.external').click(function(){
        window.open(this.href);
        return false;
    });
});

What this code does is harness the power of jQuery selectors to first select every <a> element with a class name of “external”. It then attaches a custom function to the “click” event of those elements. The custom function is as simple as opening a new browser window with the href attribute of the currently clicked element.

Simple, huh? You may notice I haven’t done this myself in this blog. First off, I’m lazy, and when I designed the site I clearly targeted the Transitional spec as the one to follow. But you know, I’ll probably get around to changing this some day soon.