Copter Labs

Client Login

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!

  • http://Website(optional) Simon

    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 :)

  • http://www.ennuidesign.com Jason Lengstorf

    @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!

  • http://Website(optional) Simon

    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.

  • Rodney

    Simple idea for a ITT:

    Tutorial for beginners:

    Create a: “you have to enable javascript to view this page”-message

  • http://[email protected] Montana Flynn

    @Rodney That is actually a really easy request. Simply use the noscript tag.

    You have to enable javascriprt to view this page