I was referred to this by tcervo through the WordPress forums and I wanted to document it. I am not a big proponent of opening new browser windows with links on my pages, but sometimes it needs to be done. However, using target=”_blank” will break XHTML 1.0 Stric validation. A couple of people have come up with fixes for this. The simplest turns out to be a peice of Javascript documented here Basically instead of using
<a target=”_blank” href=”http://blahblah.com”>new link</a>
you would use
<a rel=”external” href=”http://blahblah.com”>new link</a>
and the javascript would do the job of matching the rel tag and putting out a new browser window.
In my opinion, there comes a time when compliancy gives way to over enthusiasm and we might be reaching the limit in this case. In order to use a well documented (albeit arcane) HTML feature and keep it compliant with XHTML, one has to go around the block, add slow code and make things more complicated than they have to be. *Shrug*
If you know of a better method, please leave a comment so I can add yours to the list.
The best method is just to define a new DTD with the attribute you need.
http://dionidium.com/2004/05/xhtml-tests
Well, I suppose we could use XHTML Transitional instead…but why would we want to do that 😉
(Before anyone starts a rant about Strict vs. Transitional, keep in mind we’re talking about blogs here…which tend to be more cutting edge. Using Transitional on a commercial site is, in many cases, the better choice.)
Apologies for the previous comment — my 2-year old son got to the keyboard…
Anyway, another way of doing it is
Some Other Site
(spotted on http://www.phpfreaks.com/quick.....ve/231.php)
But I think I prefer the method referred to here.
I meant to say:
<a”window.open(this.href,’_blank’);return false;” href=”http://some_oother_site.com”>Some Other Site</a>
Anybody know how to get around the XHTML validation requirement that you can’t put an “a” tag inside a text box (for easily copying text for someone to link to your site? If so please post. Many thanks…
Steve, if you ever come back, use < and > instead of < and >. Since you’re displaying the characters themselves on the page, not using them, you want to use the html entity sequences.
Thanks for the help! I’ve been needing this information. I wish they would have just kept the target attribute. Sure would be easier.
I’v read along the way on other solution for this.They used DTD as an extension with the Strict DTD already defined. Any comment about that?
how about this:
<a href=”www.google.com” rel=”external” onclick=”this.target=’_blank’;”>external link</a>
dUcA
rel=”external” onclick=”this.target=’_blank’;”
uses the current window, at least when I try it
What is the reason W3C decided not to include the ‘Target attribute’ in strict 1.0 ???
Sorry….
Why was the target attribute removed from XHTML 1.1?
It wasn’t. XHTML 1.0 comes in three versions: strict, transitional, and frameset. All three of these were deliberately kept as close as possible to HTML 4.01 as XML would allow. XHTML 1.1 is an updated version of XHTML 1.0 strict, and no version of HTML strict has ever included the target attribute. The other two versions, transitional and frameset, were not updated, because there was nothing to update. If you want to use the target attribute, use XHTML 1.0 transitional.
@ dUcA : onclick isn’t supported by netscape/firefox. Change the onclick to onMouseDown and it works like a charm on IE and FF.
rel=”external” onMouseDown=”this.target=’<>’;”
Thanks duca for the info.. it worked for me
@Fahadh onclick is supported by Firefox. Probably is just that the event fires after link is followed by the browser making it look like it isn’t supported in that particular case.
Using JavaScript to create the new window seems like a half baked solution. I prefer that supplied by @nemo.
http://dionidium.com/2004/05/xhtml-tests
It is eXtensible HTML after all.
Here’s probably a good solution:
execute a js function on loading of html page, say example on load of body
then have this code run:
function init() {
var a = document.getElementsByTagName(“a”);
for (var i = 0; i < a.length; i++) { if (a[i].className == "external") a[i].target = "_blank"; }
}
make all your links have class="external" that you wish to open externally.
thanks.
I have implemented a similar method to deal with making external links in a strict document validate AND work properly. It uses jQuery.
jQuery(document).ready(function($) {
$(‘a’).each(function(){
if (($(this).attr(‘rel’)==’external’)||($(this).attr(‘rel’)==’nofollow’)) {
$(this).attr(‘target’,’_blank’);
}
});
});
Enjoy!
If you are using jQuery it can be done in 1 line:
$(‘a[rel=”external”]’).attr(‘target’, ‘_blank’);
Strictly speaking 😉 the strict DTD is supposed to separate meaning from presentation. On a website when you link some other site but you don’t want to surrender your viewer, you should open another window. I also dislike abuses, but in this case, there is a different meaning (come back when you finished with the link or go, it is the same site) not presentation. This is why I believe target should be kept.