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"
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.
At the bottom of any page that features external links, we need to include one line of jQuery code (and jQuery itself, of course):
And that’s it. Seriously.
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.