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
This is my first time i visit here . I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! Keep up the good work.
Ken Griffey Jr Shoes 12:34am Feb 8, 2012 permalink | flag
I found so dozens entertaining fabric in your blog, especially its discussion. From the tons of comments on your articles, I estimate I am not the only one owning all the kicks here! Keep up the good work.
stairs nosing 2:53am Feb 9, 2012 permalink | flag
Nice collections!!! great source….Thanks for the post! ??
sexy suit 12:08am Mar 1, 2012 permalink | flag
This is my first time comment at your blog.Good recommended website.
slim man 12:09am Mar 1, 2012 permalink | flag
I found so loads entertaining fabric in your blog, especially its discussion. From the tons of comments on your articles, I estimate I am not the only one owning all the enjoyment here! Keep up the good work.
cheap rock of ages tickets 11:31pm Mar 13, 2012 permalink | flag
I also want to learn, who can teach me....
swords shop 7:18pm Apr 9, 2012 permalink | flag
Louboutin Shoes,Christian Louboutin Shoes,Louboutin Shoes Outlet,Louboutin Shoes 2012,Christian Louboutin Outlet
"the article is composed by seoersong 20120417"
http://www.louboutinshoesoutlet2012.com/
Louboutin Shoes 5:37am Apr 17, 2012 permalink | flag
Great news update!! I am wondering how you guys manage to find such kind of information so early.
awais11 4:13am Apr 30, 2012 permalink | flag
Good!!!! What you said is right
kuke 3:10am May 2, 2012 permalink | flag
Thanks for a nice share you have given to us with such an large collection of information. travelling tips
awais11 5:08am May 2, 2012 permalink | flag
Thanks, you have made it easy for me to understand.
burn fat 1:17am May 4, 2012 permalink | flag
I am currently working on an assignment and I have been exploring your blog for a few hours. Thank you for your post it proved helpful for me.
Xbox 360 Repair Articles 4:05am May 4, 2012 permalink | flag
Good Post. It is really very nice. Thank you!
Wholesale NBA Hats 12:19am May 9, 2012 permalink | flag
Join In.
Have something to say? By all means, speak up!
But first, a few rules:
Happy commenting!