Easily Create External Links Without the Target Attribute

Use External Links and Stay XHTML 1.0 Strict

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!

Posted Jun 16, 2009 by Jason Lengstorf.
This entry is filed under instant tip tuesday, javascript, xhtml, valid code, and standards.