Coding with Jesse

target="_blank" With XHTML 1.1

January 24th, 2007

I received a question this morning from someone asking:

In XHTML 1.1 we cannot use attribute 'target=blank', so what is the solution?

The solution is to use regular links, but to make them open into a new window using JavaScript. To do this, we can add something to the links to flag them as being special, perhaps a class called new-window:

<a href="page.html" class="new-window">Page</a>

Then, use JavaScript to find all the links that have this class name and tell them to open in a new window:

window.onload = function() {
    var links = document.getElementsByTagName('a');
    for (var i=0;i < links.length;i++) {
        if (links[i].className == 'new-window') {
            links[i].onclick = function() {
                return false;

or using jQuery:

        return false;

If you have any other questions like this, feel free to ask me and I'll be happy to answer them here.

Interested in web development? Subscribe to my newsletter!


1 . Martin S. at 2007-01-24T17:26:33.000Z

Martin S.

If you really do want to open new windows, shouldn't you consider using another doctype, for instance a transitional one, which does not require you to not open external links with the target attribute?

Nice code anyway. :)

2 . Jesse Skinner at 2007-01-24T18:07:18.000Z

Jesse Skinner

Sure, you could use XHTML 1.0 Transitional. But if you want to use XHTML 1.1 and have links open in a new window, you're stuck using JavaScript to do this.

3 . trovster at 2007-01-24T18:52:10.000Z


This is exactly the same solution which was posted in a sitepoint article titled New-Window Links in a Standards-Compliant World. Although, instead of using a class name, it uses the more semantic rel attribute.

4 . Jason Barnabe at 2007-01-24T20:48:04.000Z

Jason Barnabe

The most correct answer is "don't open a new window". Opening new windows is bad for usability because it breaks the normal behaviour of web pages (for example, back buttons). If the user wants a link opened in a new window, the user knows how to do it themselves.

The second most correct answer is "don't use XHTML 1.1". Any benefits received from using XHTML are offset by the fact that the page won't work for 80% of users out there.

The third most correct answer is "use the target attribute anyway". I don't think any browsers out there will ignore the target attribute just because you claim to use XHTML 1.1 in the DOCTYPE. If you're already sending XHTML as text/html for IE users, what's wrong with another non-standard "compromise"?

I would say that using the script provided is fine as a fourth-best solution, but if you MUST open a new window, and you're standards-crazed enough that your site MUST be valid XHTML 1.1, why aren't you standards-crazed enough to reject the usage of non-standard ECMA script like window.onload, element.onclick, and

5 . Jesse Skinner at 2007-01-24T21:25:13.000Z

Jesse Skinner

"why aren't you standards-crazed enough to reject the usage of non-standard ECMA script like window.onload, element.onclick, and"

I try to write code that people can easily copy and paste, and I want to keep the examples relatively simple. I always recommend people use addEvent instead of onclick, and addDOMLoadEvent instead of window.onload. Those who already know this will understand to use these, and those who don't won't be hurt by using old school JavaScript (until they wonder why their other window.onload function stopped working, I suppose).

That's why I give the jQuery example as well, so there's at least one "proper" example ;)

6 . Jason Barnabe at 2007-01-24T22:56:16.000Z

Jason Barnabe

You chopped up my question. I wasn't asking "why are you using non-standard ECMA Script?". I was asking "Why are you using non-standard ECMA Script to avoid using non-standard HTML?" Even your jQuery example is non-standard with, not to mention whatever jQuery itself does.

Reworded: given the choice between simply defining the non-standard target attribute in the HTML or writing a more complex, non-standard script which also has all the disadvantages scripting brings to the table, why would you choose the script?

7 . Jesse Skinner at 2007-01-24T23:20:11.000Z

Jesse Skinner

I didn't mean to take your quote out of context, I just wanted to address why I use 'window.onload' in examples even though I'd never use it myself.

I agree with you that it's better to rely on a non-scripting solution, and that XHTML 1.1 isn't appropriate to use yet.. but maybe one day this blog post will be relevant.

8 . Jason Barnabe at 2007-01-25T15:11:54.000Z

Jason Barnabe

"but maybe one day this blog post will be relevant."

Maybe, but maybe the target property of CSS 3 will gain support before XHTML 1.1 does.

9 . Jonathan Edmonds at 2007-01-27T05:08:23.000Z

Jonathan Edmonds

Here goes, this is my first ever source code question so bare with me. I'm trying to embed my delicious links in a Joomla! wrapper. Delicious gave me this...

<script type="text/javascript" src=";icon;name;showadd"></script>
<noscript><a href="">my</a></noscript>

It works great but the links open in the same window which don't fit inside my Joomla! site. I want them to open in new windows. I tried your code in every way I could think of and couldn't get it to work. I very new at this and would appreciate some help. Thanks.

10 . Jesse Skinner at 2007-01-27T06:31:37.000Z

Jesse Skinner

@Jonathan - the class name for delicious links is 'delicious-link', so you'd need to use that instead of 'new-window'.

If you already tried that, perhaps the problem is the script is being loaded too soon. Try adding it in a timeout to give some time for the delicious script to run, like so:

window.onload = function(){
// code above that changes the delicious links
}, 5000);

You could also try the approach of using setInterval to check the page every second until the links you want show up, then attaching the events and clearing the Interval.

11 . Jonathan Edmonds at 2007-01-27T07:20:18.000Z

Jonathan Edmonds

You Rock. How did you know that 'delicious-link' was the class name?

Many thanks,

12 . Terry at 2007-02-01T20:38:09.000Z


This code was created by someone else...not trying to bust your balls here or anything. At least give credit where credit is due:

13 . Jesse Skinner at 2007-02-01T20:48:40.000Z

Jesse Skinner

@Terry - Obviously I didn't copy Roger's script, just wrote my own code to accomplish the same thing. Actually, I've never seen Roger's solution until now. But his is also nice (albeit much more complex).

14 . Terry at 2007-02-02T16:49:30.000Z


You are correct...and like I said, I wasn't trying to bust your balls on this. If you look at other versions and other people's customizations...they all derived from his code (just like all versions he published pre 1.2 or which ever version it's on.)

When I saw your code...and logic...the first thing that came to mind was his code. You may very well have written it all on your own, but it's similar enough that I wasn't the only one that noticed.

Side note: I do enjoy your site and use it when I find useful information. Keep it up!

15 . H5N1 at 2007-02-07T09:45:21.000Z


You inserted some text in "blockquote" TAG so this page is not valid XHTML:

Error Line 36 column 12: character data is not allowed here.

<blockquote>In XHTML 1.1 we cannot use attribute...

16 . Ray at 2007-02-07T23:14:58.000Z


..."solution, and that XHTML 1.1 isn't appropriate to use yet.."

Can you guys please elaborate??

Thanks! :)

17 . Martin Kliehm at 2007-02-28T09:56:50.000Z

Martin Kliehm

There are yet more ways to use the target attribute in XHTML 1.1, without script and totally standard conforming. After all, XHTML is extensible!

18 . ricardo prado at 2007-03-10T20:51:52.000Z

ricardo prado

it wont be more simple:

<a href=""

19 . mike at 2007-03-14T21:26:00.000Z


Yes it will:
<a href=""

20 . VARA at 2007-07-10T07:54:40.000Z


If the user viewing the page has javascript disabled, then the hole thing doesn't work.
So, I think, javascript is not the solution to the <target="blank"> validation problem with XHTML strict 1.1
In other words, let's hope that W3C gives a solution in the future...

21 . Michalis at 2007-08-31T18:25:57.000Z


Comment 19 works perfect.

22 . I Bap at 2007-09-25T13:20:19.000Z

I Bap


This works with xhtml 1.1 and is valid for

Thank You

23 . old timer at 2007-10-25T19:00:24.000Z

old timer

Just another reason why I stick to nothing newer than HTML 4 with JS and CSS as needed.

24 . Adam at 2007-11-16T23:58:20.000Z


After reading this post the code is slick for jquery.
Here is a mod:
//get the click to open popup
$(document).ready(function() {
return false;

Anyway this will open up a new window based on the 'rel' attribute. Web semantic as it should be.
For the rest of you whining about XHTML.
Get with the program.
If I was hiring you and looked at your code (especially old timer guy) I would not hire you.
Maybe go back to Frontpage.

Wicked post.
Jquery rules!

25 . fedmich at 2008-02-17T06:30:09.000Z


Nice code. Jquery rocks.

I was about to apply that trick to my portfolio page, but in the end I just simply changed doctype, its much easier that way

Cheers to all :)

26 . kiflea1 at 2008-06-02T21:31:56.000Z


I agree with Jason Barnabe. Don't use a new window.

The standards way of opening up a popup window is to use a floating div.

"Any benefits received from using XHTML are offset by the fact that the page won't work for 80% of users out there.
Jason, I disagree with you on that. Most browsers support xhtml.

27 . adam at 2008-06-03T21:14:29.000Z


I find it funny that someone would say not to use a new window and use a floating div instead.
What happens if it is an offsite link?
Do you want your clients site users going to other sites and not returning?

Bringing standards into this is a poor excuse.

28 . Charles Bash at 2008-09-17T15:07:55.000Z

Charles Bash

I think the base question that I see here is "why would anybody want to open "new windows" as it destroys the use of the "back button".

I was originally on the same page, but I have many links that go outside my site, and users complained "how did I end up on some strange site and not on your site" So I changed my code so that when on my site, I stay in the same browser window, but when going to other sites, I start a new window.

Users have to recognize that there are now two windows (or with tabbed browsers, potentially a new tab), so this is also potentially confusing. But it does allow somebody to maintain their context on my site while also viewing information from another site.

Since TARGET seems to be in XHTML 1.2, it would seem others agree that this is a valid user dynamic.

29 . adam at 2008-09-23T19:47:30.000Z


Mr. Bash. It is all a matter of opinion and what the client wants.
One client wants a new window to open cause his demographic is old. The other wants people to use the backbutton.
If people are not using a tabbed browser where does it leave them?
I guess you build sites for people using Tab Browsers only?

"Since TARGET seems to be in XHTML 1.2, it would seem others agree that this is a valid user dynamic."

Seeming there is no final (or valid DTD-doctype) version for XHTML 1.2, why start building for it?

I guess XHTML 2.0 is in the draft phase too.

Looking at the articles that surround XHTML 2.0 people are not migrating cause of cross browser issues.

So where does it leave this debate..

No where. I have work to do and clients to keep happy.

30 . Noam at 2009-01-22T09:32:52.000Z


Why not :

Why using

31 . Noam at 2009-01-22T09:34:13.000Z



32 . Jesse Skinner at 2009-01-22T10:26:34.000Z

Jesse Skinner

@Noam - setting target=_blank will PROBABLY work, but really you're trying to use a feature of HTML with XHTML 1.1. It's kind of a hack since the browser doesn't have to implement the target="_blank" for XHTML 1.1 documents, you're just assuming they will.

If you want target=_blank you can always just use XHTML 1.0 or HTML of course. This is probably the best solution.

33 . Noam at 2009-01-22T10:28:17.000Z


Didn't think about it with this perspective...
Good thinking!

34 . Santosh kori at 2009-02-09T15:25:31.000Z

Santosh kori

Good trick,
It helped me in XHTML Validation.


35 . Prem ypi at 2009-03-04T05:11:44.000Z

Prem ypi

This is neat code.

But the question persists, do we really need to use xhtml?

to me strict sounds good, whether html or xhtml should not matter though. Thats separate thing, that html strict also doesn't allow target parameter!

36 . Matthew Hartman at 2009-07-14T03:17:00.000Z

Matthew Hartman

Awesome trick, keep up the great work!

37 . Harshit at 2009-09-01T13:56:26.000Z


The solution you provided uses is stopped by all pop-up blockers which quite a few of the users have installed. Dynamically adding target=_blank is the way to go as the browser will not stop it and it will remain XHTML 1.0 Strict compliant.

I have a little code to share. This will automatically add a target=_blank to all external links whereas not do anything to internal links:

$(document).ready(function() {
$("a").filter(function() {
return this.hostname !== location.hostname;
}).attr('target', '_blank');


38 . Harshit at 2009-09-01T14:01:47.000Z


@Jesse's comment at 32

The reason target=_blank is depreceated is because of usability & accessibility concerns when opening a new window.. It is not because the words 'target=_blank' are evil.

By using, you are effectively doing the same function as target=_blank. Only difference is that W3C XHTML does not apply to javascript so it does not catch it. So whether you use target=_blank or, both of them are not good for usability purpose. But alas, clients are kings!


39 . skydrv at 2009-09-06T01:53:57.000Z


Thanks for your article Jess, just a question: is it right that the "onclick" function acts as a "nofollow" attribute? In other words, does google follow the links opened by javascripts? Thanks in advance! :)

40 . Jesse Skinner at 2009-09-07T15:41:07.000Z

Jesse Skinner

@skydrv - I believe that's correct, Google doesn't seem to parse out any URLs used in JavaScript.

It's better to use robots.txt and rel="nofollow" instead if you can, though, so that your links don't require JavaScript and break for users that can't or don't want to use JavaScript.

41 . Aram at 2009-09-13T15:30:41.000Z


Viill lära mig HTML, har ni några tips på varifrån jag ska påbörja! TACK!

42 . Don Pedro at 2009-09-26T20:56:57.000Z

Don Pedro

I justed converted various links
in files "XHTML1.0 transitional" (to make them fit to "strict", too),
to the format like message 19:

<a onclick="target='_blank';" href="\">

Now I learn from message 39 + 40 that this would perhaps result in "nofollow" for Google.
This is no problem for links to others.

But this would be a problem in the typical case when we generate natural true content-inserted links between our own sites. Google would not count them in the backlink sum, while being full value links.

Messages 39 + 40 express "probably". Is here somebody who can confirm by sure the google crawler behavior related to this?

43 . Don Pedro at 2009-09-26T21:12:37.000Z

Don Pedro

add-on to Comment 42:
My first opinion:

The Google problem probably concerns the case that Javascript has totally taken oven the link generation. The Google crawler does (probably) not include a simulator of the Java interpreter.

In the example in Comment 42,
<a onclick="target='_blank';" href="\">
the link is still HTML code, not Javscript. I suppose that Google will take the link like any other usual link.

Possibly, Google will just do nothing with the included:

And I suppose that the Google quality evaluation of links will,
=== in general, ===
not make a difference in case of inclusion of a "open tab" functionality like:

We do not like the word "suppose".
Is there somebody who knows far more than me about this? :-)

44 . Ian at 2009-11-20T15:38:48.000Z


It seems like even though that is technically valid according to the letter of the standard, you're still violating the spirit of the standard. So what's the point? Why jump through hoops when nothing is really different? If you're going to violate the standard, just use target="_blank" and own the decision.

45 . Abhi at 2009-12-22T13:37:00.000Z


I want to do a jquery POST in a new window (popup). Basically trying to open up a print version of a page. So POSTing the data and then receiving the response in a new popup window is what I am trying to achieve. Any pointers will be helpful.

46 . Hi Abhi at 2009-12-22T16:11:04.000Z

Hi Abhi

There are enough posts on the internet which will guide you through this. As an example, checkout what i did for one of my client: ... Add a product to the compare basket and on the left hand side block click on 'compare items'. It posts data to a new window. You can check its source to see its implementation..

As a hint, you need to start playing with form target="blah blah"

I have also implemented posting form data from pop window to parent window. Check out 'compare' feature on 's product page.. Click on 'Add to Basket' when the pop window opens..

Give me a shout on [email protected] if you have any questions...

47 . Mahesh at 2010-01-28T14:24:15.000Z


Hey Brothers,

this is best script ....i spend hrs and after i got this page and thanks thanks thanks to Mike :-)

<a href=""

48 . anony at 2010-06-22T18:28:44.000Z


@ Jason Barnabe,
Sorry I just read the boring rant by you, and felt compelled to comment! Just clicking you name shows me you have no style.

49 . tuba at 2010-07-05T18:54:54.000Z


Nice info!

I am using <a href="" onclick="'_blank'"> seems perfect!

50 . Lully at 2010-07-07T10:47:00.000Z


Thank you for your code, your comments and the discussion here. I learnt a lot about about this topic.

51 . dpmguise at 2011-01-27T06:03:34.000Z


Seeing as this conversation has already spanned 3 years, I felt the desire to keep it going.

Thanks to everyone's comments on this topic, I don't know if I am much clearer but I certainly understand the situation much better.

My thoughts are with others where, if you're trying to reach strict standards, then don't attempt to open a new window - that's what the people who made the standards are trying to emphasis... it should be a user decision...

If you're just trying to beat the W3C validator to appear that your page is standard... use one of the many suggestions provided... my preferred is onclick="'_blank'" due to it's similarity with the original code...

Thanks to everyone, great read!

52 . Vic Dinovici at 2011-12-29T13:08:00.000Z

Vic Dinovici

This works fine as well:


or if you don't like creating classes for each external link:


in translation for each link starting with http:// ad target="_blank". This is assuming that the internal links have relative paths.