Subscribe to our RSS

W3C Valid Replacement for target=”_blank”

Tags: , ,

W3C Valid Replacement for target=”_blank”

Using target=”_blank” for links in an HTML page will generate errors when running code through the W3C validator. Well, if you are using the older Transitional document type it would not, but errors will for sure be reported for Strict document types. An easy and quick solution is to create a JavaScript handler for your links. This tutorials explains how to create an SEO-friendly (of course) W3С valid replacement for target=”_blank” by using only a few lines of jQuery code.

Here are two easy solutions to solve the task. In both solutions we will walk through each link in a page and apply our handlers to them so they will open in a new window. You should use the code below in your <head>…</head> tag, i.e.:

<head>
...
     <script type="text/javascript">
     //    Put the code here
     </script>
</head>

Or you may save it to a separate file and link it in the <head>…</head> tag, i.e.:

<head>
...
<script type="text/javascript" src="path-to-js-file.js"></script>
</head>

Solution 1

While the target attribute is depreciated by W3C Strict standards, it is available via the DOM object. For the first solution, you can apply target=”_blank” via JavaScript. It will open in a new window and still be W3C valid. Here is the code:

     $(document).ready(function(){
          $('A[rel="_blank"]').each(function(){
               $(this).attr('target', '_blank');
          });
     });

Solution 2

While the first solution is to apply ‘_blank’ value to a native link’s attribute ‘target’ via JavaScript, the second solution is to handle the click on the link and open it in a new window. Please note that both alternative methods are absolutely SEO friendly and W3C valid. The code for the second solution is:

     $(document).ready(function(){
          $('A[rel="_blank"]').click(function(){
               window.open($(this).attr('href'));
               return >false;
          });
     });

That’s it ;) Click the Demo button to see it in action.

ever spark interactive

April 13, 2012

Awesome tutorial on how to create an SEO-friendly W3С valid replacement for target=”_blank”. I think a lot of people overlook this. Yet it is very helpful in search engine optimization. Thanks for the how to tip!

ahmed

February 8, 2012

Thanks to Tom Tinker

Me

September 7, 2011

Actually all you guys do is trying to trick the w3c-validator with js. I don’t think any of this is really necessarry, since every browser nowadays can still interpret the target-tag. I think W3C is generally a good help to keep your html clean, but you should not let it force you to come up with some nasty workarounds. Also, almost no big company website in the www is w3c-conform, so who cares?

Same goes for the autocomplete-tag on password-inputs. Absolutely great tag, but one “doesn’t dare to use it, because w3c-validator will get mad, buhu”.

Tom Tinker

August 22, 2011

But the much shorter onclick=”target=’_blank’;”
passes the W3C online validator, works just as well, and is a lot simpler…

Biggebass

April 18, 2011

I tried but your demo button but it did not work.

My problem is that I am using IE9 32-bit in Win7 and target=_blank and the demo button result in the same way: A new tab is created but it is completely blank (no content at all). It’s valid for all appempt to open a new tab/window – but only in the 32-bit version.

Darren – ajaxBlender

March 10, 2010

Jonny, our testing shows that the script (and the above mod) are working correctly with a lightbox add-on. If you provide your code, we would be happy to troubleshoot it. Either post here or email us at support@. Thanks!

Jonny

March 9, 2010

This doesn’t play nice with Lightbox… any suggestions?

Darren – ajaxBlender

January 11, 2010

Here is a quick mod to maximize the new window for the 2nd. (It will not work with the first solution though.):

$(document).ready(function(){
$(’A[rel="_blank"]‘).click(function(){
var wndHandle = window.open($(this).attr(’href’));
wndHandle.moveTo(0, 0);
wndHandle.resizeTo(screen.width, screen.height);
return false;
});
});

Albert

January 5, 2010

Thanks. How to maximize the new window when submit the page through JS Code.

Paul

December 31, 2009

Thanks for the tutorial. I was looking hard for a SEO friendly way to do this. thanks guys!

Leave a comment

Your name

October 25, 2014

Spam protection. Enter result of expression you see in the box below.

2 + 6 =