Code as beautiful as your designs.

Primesolid takes your design, markup, or idea and makes it do stuff.

From the Blog

Should some links automatically open in a new tab/window, or should the user make the decision for themselves by ctrl-clicking, middle clicking, or right-clicking and choosing from a context menu?

Until recently I had preferred leaving it up to the user. But then I saw an estate agent repeatedly clicking links to properties, then using the back button and twiddling the javascript controls which filtered the properties to show the price range she was looking for. Evidently, she wasn't aware of how to use tabs or new windows. So maybe I've changed my mind. 

In any case, clients will often request — perfectly reasonably — that links to external sites open in new windows. So how to do this simply, reasonably semantically, gracefully and without being SEO-hostile?

Enter the “rel” atttribute of the link tag. 

For each link that you want to open in a new window, you can simply give it a rel attribute of external, like this:

<a href='//example.com/external-link' rel='external'>This opens in a new window</a>

All the popular WYSIWYG editors allow you to specify a rel attribute (usually labelling it 'relationship'). So far so simple. 

Now you need to tell the browser to open these links in a new window. Enter jQuery.

In your DOM-ready handler, or your onload handler, or at the bottom of your content, add this:

$("a[rel='external']").attr({
    target: "_blank",
    title: "Opens in a new window"
});

jQuery matches all links with a rel attribute of 'external', and adds a 'target' attribute of '_blank'. Old-school stuff, and for a while frowned upon, but now smiled upon again by HTML5. Still perfectly cromulent in old browsers too.

For good measure, I add a title which explains that the link will open in a new window, to try to minimise user-surprise. 

I said reasonably semantically, because the HTML specs say:

Authors may wish to define additional link types not described in this specification. If they do so, they should use a profile to cite the conventions used to define the link types.

You of course are not going to waste the time and bandwith to do this, as browsers won't follow the profile.

About Chris How
Chris How

Primesolid is the company of Chris How, peripatetic programmer and web-wrangler.

I’ve over 10 years experience developing for the web, and specialise in open source software, rich client-side experiences, desktop-like interfaces, and robust back-end infrastructure.

My expertise includes Javascript, jQuery, PHP, Linux, perl, Apache (I’m a mod_rewrite/mod_proxy guru), MySQL, custom content management systems, Wordpress, dynamically generated graphics, geodetics, geovisualisation, statistics, Google Maps API, EC2/S3 and lots more.

Primesolid is a UK limited company, registered in the UK for VAT.

Back to Top