Hold on... This isn't EnnuiDesign.com — What Gives?
It's been a long time coming, but Jason Lengstorf, formerly of Ennui Design, has expanded his team to include Drew Douglass, Rob MacKay, Henry Moran, and Tom Sturge.
It didn't feel right to keep the same name, so we decided to continue on as Copter Labs. You can expect the same great content under this new name!
Easily Create External Links Without the Target Attribute
Today's tip is extremely short and simple, and to a lot of folks may be a "Duh!" sort of tip, but I felt it was worth sharing.
I'm a big fan of keeping sites valid in XHTML 1.0 Strict. When I first started paying attention to standards, one of the things that stumped me right off the bat was the use of external links.
The Problem with target="_blank"
As I'm sure most people know, the use of the target attribute isn't considered valid. However, in order to open links in a new page, the only tool provided by HTML is the target attribute!
I had been creating external links for as long as I could remember using the following format:
<a href="http://example.com" target="_blank">External link</a>
The Fix: rel="external"
The HTML
When I started using jQuery, I stumbled across this little gem that allowed me to have my valid code and external links with one simple line of code:
<a href="http://example.com" rel="external">External link</a>
The use of rel="external" is perfectly valid, and doesn't cause any problems at all. However, this attribute won't work by itself. In order to cause the links to open in a new page, we first need to employ a jQuery one-liner.
The JavaScript
At the bottom of any page that features external links, we need to include one line of jQuery code (and jQuery itself, of course):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('a[rel="external"]').attr('target', '_blank');
</script>
And that's it. Seriously.
This method degrades gracefully: if the user doesn't have JavaScript, the link will open in the same window. This method is easy, lightweight, and most importantly, valid XHTML 1.0 Strict.
Summary
Writing valid code should be high on any developer's to-do list, and using the rel="external" trick is an easy way to take yourself one step closer to completely valid sites.
Do you have any tricks to keep sites valid? How about a raw JavaScript, MooTools, or other library method of doing the rel="external" trick? Share it in the comments!
Jason Lengstorf
Jason Lengstorf a turbogeek hailing from Portland, Oregon. He designs and develops websites using PHP, MySQL, JavaScript (jQuery), CSS, and HTML. He's written two books (PHP for Absolute Beginners [2009 Apress] and Pro PHP and jQuery [2010 Apress]), and he's written articles on development and design for Nettuts, CSS Tricks, and Smashing Magazine, among others.
Comments.
Nice tip (and by the way thanks for all the usefull articles ! ) but (yeah sorry... ) isn't that just a way to go around w3c rules ? Because what w3c tried to avoid is not the use of target _blank but the fact that the page opens in a new window. So the validator is going to validate your code but this method is still not 100% strict valid ;)
But anyway, thanks for the tip. It can still be used for other problems :)
Simon 8:45am Jun 17, 2009 permalink | flag
@Simon:
Yes, it's a workaround.
The use of new windows is a grey area in that clients demand it even though it's frowned upon.
On personal projects and client projects that don't specifically request external links, I avoid them. However, when it can't be avoided, I'd rather use a workaround and still have sites validate.
Thanks for your input!
Jason Lengstorf 11:14am Jun 17, 2009 permalink | flag
Ok, my bad. I thought you were talking about personal projects ;)
And I guess you're right to point this out for some client projects.
Simon 12:32pm Jun 17, 2009 permalink | flag
Simple idea for a ITT:
Tutorial for beginners:
Create a: "you have to enable javascript to view this page"-message
Rodney 11:26pm Oct 18, 2009 permalink | flag
@Rodney That is actually a really easy request. Simply use the noscript tag.
You have to enable javascriprt to view this page
Montana Flynn 6:43pm Dec 26, 2009 permalink | flag
The greatest gifts in life are not purchased, but acquired through hard work and determination. Find the star that twinkles in your heart?for you alone are capable of making your brightest dreams come true. Give your hopes everything you've got and you will catch the star that holds your destiny.
Air force nike pas cher 7:12pm Oct 18, 2011 permalink | flag
Take pride in your accomplishments, as they are stepping stones to your dreams. Understand that you may make mistakes, but don't let them discourage you. Value your capabilities and talents for they are what make you truly unique.
Supra Shoes Prix 7:13pm Oct 18, 2011 permalink | flag
As I'm sure most people know, the use of the target attribute isn't considered valid. However, in order to open links in a new page, the only tool provided by HTML is the target attribute
!
cheap jerseys from jerseys 3:19am Oct 29, 2011 permalink | flag
Legend of Zhong Qing court the remaining two people: 1: no money man 2: The woman is not packaged
Ken Griffey Shoes 6:41pm Dec 19, 2011 permalink | flag
abercrombie and fitch uk sale
abercrombie and fitch uk 1:28am Jan 11, 2012 permalink | flag
moncler jacken online shop
moncler jacken 1:28am Jan 11, 2012 permalink | flag
abercrombie and fitch uk sale
abercrombie and fitch 1:29am Jan 11, 2012 permalink | flag
Patience is most bitter, yet most sweet the fruit it birth
Asics Shoes 1:54am Jan 14, 2012 permalink | flag
Join In.
Have something to say? By all means, speak up!
But first, a few rules:
Happy commenting!