After transcending across to (X)HTML strict you may have noticed the absence of the target attribute. The target attribute was actually removed from the strict specifications in 1997, though is still present in the transitional and frameset doctypes. Contrary to what many people think, target isn't only absent in XHTML strict - it isn't part of HTML 4 strict either.
The target attribute is used to specify where a link opens: whether it is opened within a frameset, or as a new window. The reason it was removed was because the W3C felt that it took away the users ability to "choose". By defining a target for a new page, you are making the decision for the user as to where the link opens - not letting them decide for themselves.
Obviously, nothing is physically stopping you from adding a target attribute to your document, but try and validate your site with one and you will get the following error:
This page is NOT Valid (X)HTML Strict!
While frames are a big no-no, the target attribute does have its uses. It's helpful in situations where we want to open a new window without using a popup. So what do we do then? You'll be pleased to know, all is not lost.
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
This function will find all anchor tags (link tags) in a document and check to make sure they have a href attribute and also, importantly, a rel attribute, which equals "external". If both conditions are met, it will replace rel="external" with target="_blank".
Here's how we make it happen:
<a href="test.php" rel="external">my link</a>
Place rel="external" on any links that you want to open in a new window.
Here's the brake-down...
function externalLinks() {
Start of the function
if (!document.getElementsByTagName) return;
document.getElementsByTagName is part of the DOM (Document Object Model), and is normally written like this document.getElementsByTagName('sometag'). It will retrieve a list of tags corresponding to what is in between the ''. document.getElementsByTagName is crucial to this function working correctly, so if the browser we're using doesn't support the DOM then we're telling the function - by use of return - to end there and not move on to any further processing.
var anchors = document.getElementsByTagName("a");
Here, we're defining a variable called anchors and containing within it, all of the anchor tags on the page.
for (var i=0; i<anchors.length; i++) {
Loop through our anchors.
var anchor = anchors[i];
Create an array of anchor elements called anchor whose index is equal to i.
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
Only do this part if any of our anchor elements contain a href and a rel="external".
anchor.target = "_blank";
Set the target of any anchor elements containing href and rel="external" to _blank.
}
}
window.onload = externalLinks;
End the for-loop and end the if statement and initialise the function to be called when the page loads.
Place the function into a JS file (I have called mine functions.js, as it contains all of the functions used on my website, but call yours what you want) and then include the JS file in the head of your document.
<head>
<script type="text/javascript" src="JS/functions.js"></script>
</head>
Replace JS with the directory where you store your JavaScript files and replace functions.js with whatever you called your JS file.
And don't forget to put rel="external" on links that you want to open in a new window!
<a href="test.php" rel="external">my link</a>
Now try validating your page and you will be pleased to see it validates perfectly! But if we're changing rel="external" to target="_blank" how does the page still validate? It validates because client-side scripting, such as JavaScript, isn't detected by the W3C Validator. So while our script has replaced rel="external" with target="_blank", and everything works, the validator isn't aware that we have made the switch. Clever, eh?
Got any questions or comments? Feel free to mail me @ helen@alternategateways.com.
Back to resources.