target=”_blank” XHTML replacement.

December 16th 2009

As you must already know, using target=”_blank” to open a page in a new window doesn’t validate in XHTML.

There’s a javascript workaround tho. This example is based on jQuery since it’s always included in my project and it’s my library of choice but it could be easily converted to any library.

The basics

To replace the target=”_blank” you should use the rel attribute. This attribute is used to specify the relationship  between the document that contains the link and the document it refers to. So your links should have the attribute rel=”external” to specify the link is not a link inside your website but to another website. There are plenty of values possible for you rel attributes, I invite you to read about microformats.

Now rel=”external” doesn’t mean target=”_blank”. Adding that attribute won’t open the links in new windows, it’s only a more semantic way of specifying the relationship between pages. Since some of you might not want to open rel=”external” in new windows, browser vendors didn’t implement it as being the same as a target=”_blank”. That when javascript comes into play.

The javascript

$(function(){
	$('a[rel="external"]').attr('target','_blank');
});

Easy isn’t it?

You actually need to either put that in a script of his own or at the bottom of you webpages. $(function(){ }); is actually the short document.ready call in jQuery. Once the document is ready, it’ll traverse through each link and add the attribute target=”_blank” to them. This way the W3C validator doesn’t see them and you page still validates.

Working markup

Here’s a working example with jQuery loaded.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<script src="http://www.google.com/jsapi" type="text/javascript"></script>
		<script type="text/javascript">
			google.load("jquery", "1.3.2");
		</script>

		<script type="text/javascript" charset="utf-8">
			$(function(){
				$('a[rel="external"]').attr('target','_blank');
			});
		</script>
	</head>
	<body>
		<a href="http://google.com" rel="external">Google!</a>
		<a href="http://no-margin-for-errors.com" rel="external">My site!</a>
	</body>
</html>

Your opinion?

What do you think about this technique? I personally stopped caring about my pages not validating when I use target=”_blank”, but I know some people really want to see their page validates whatever the price.

23 Responses to “target=”_blank” XHTML replacement.”


  1. Michal says:

    It`s a workaround to pass the validation. I`m always against such practices.

    I use js to open new window and close it when needed. JS offers methods to do so and in my opinion there so no need to base on target deprecated attribute.

  2. JFFortier says:

    I’m not a big fan of opening pages in new windows. Most browsers allow me to control with a right click or a keyboard key where I want a link to open (either the same page, a new tab or a new window). Because most users don’t know about this feature, I feel obligated to code the opening of an external url in a new window so that they don’t quit my site. So using a technique like this is perfect; valid, semantic and clean. However, adding rel=”external” to all external links can be a lot of work and might not be possible using a cms wysiwyg. I use a similar technique:

    var allowedDomains = [location.hostname, “myotherwebsite.com”];
    $(“a[href^=http]:not(.internal)”)
    .filter(function(el){
    for ( var i=0; i -1 )
    return false;
    }
    return true;
    })
    .bind(“click”, function(){ return !window.open(this.href); });

  3. Stephane says:

    @JFFortier: That’s a very clever technique. Never thought of it.

    The only thing, I always fear using window.open thinking browsers might trigger this as being an unwanted popup, but never got around testing it everywhere. I guess you never had problem with it?

  4. JFFortier says:

    I never had any problems with pop-up blockers but I must admit I never did an extensive testing on all of them. However we can easily replace the bind() by .attr(‘target’,’_blank’). Actually, I’ll do that for now on.

  5. […] No margin for errors Te gustó este post? Compartelo en tus redes sociales […]

  6. archatas says:

    I would rather use window.open() instead of .attr(‘target’,’_blank’). I like the idea to use rel=”external”, but sometimes it might be useful to use class=”external” to show an icon next to the link.

    BTW, popup blockers block those popups which are opened by other events than click.

  7. essjayhch says:

    You don’t need an element class these days to match HTML elements, modern CSS selects things in exactly the same way that jQuery does – in other words as far as jQuery or CSS is concerned `.classname’ is semantically the same as `[class=”classname”]’.

    The effect of this is that you can pull out external anchors by doing a query of:

    a[rel=external] { /* Do some CSS styling */ }

  8. Your writing form is really good, you have a unusual style.

  9. I really like what you guys tend to be up too. This type of clever work and exposure!
    Keep up the superb works guys I’ve you guys to our blogroll.

  10. DIRK says:

    This is a pretty shady workaround/hack, but guess what? XHTML is an even bigger hack. You want your pages to validate? Use html, the non-braindead standard.

  11. whoah this blog iѕ fantastic і really like reading your articles.
    Stay սp the ǥood work! Yߋu realize, lots of peoole are lookjing гound for this info, ʏou can aid tɦem greɑtly.

  12. fixodent says:

    bookmarked!!, I like уour site!

  13. You really make it seem so easy with your presentation but I in finding this
    matter to be really something which I feel I’d by no means understand.

    It sort of feels too complex and extremely wide
    for me. I am having a look forward to your next publish, I will try to get the
    cling of it!

  14. I’m curious to find out what blog platform you’re using? I’m having some minor security issues with my latest website and I would like
    to find something more secure. Do you have any recommendations?

  15. What’s up, I desire to subscribe for this web site to get hottest updates,
    thus where can i do it please help out.

  16. I think the admin of this web site is really working hard in favor of his web site, since here every data is quality based stuff.

  17. Thanks for yor marvelous posting! I truly enjoyed reading
    it, you can be a great author.I will be sure to bookmark your blog annd definitely will come back in the foreseeable future.
    I want to eencourage you continue your great work,
    have a nice morning!

  18. news says:

    Appreciation to my father who informed me regarding this website, this website
    is in fact awesome.

  19. CockSucker says:

    The services of finding your date have come to your doorstep.
    and you might be not having disagreements about issues.
    When you make a long term association with a few targeted
    venues, you can negotiate better price terms and also obtain credit from the venue owners.

  20. Have you ever thought about writing an ebook or guest authoring on other sites?

    I have a blog centered on the same information you discuss and
    would really like to have you share some stories/information. I know my subscribers would
    value your work. If you are even remotely interested, feel free to shoot me an e-mail.

Leave a Reply