I suggest not adding in the target attribute. It was dropped due to accessibility reasons, and I dislike it when the page decides for me how my browser tags open. Of course, you are free to do so, if you wish to. I will show you a JavaScript method that Darin mentioned above that allows you to validate as XHTML 1.0 Strict or XHTML 1.1:
HTML code:
<!-- Added link titles for better testing purposes -->
<ul id="socialnetwork">
<li><a href="http://www.twitter.com/" class="targetblank">Twitter</a></li>
<li><a href="http://www.flickr.com/" class="targetblank">Flickr</a></li>
<li><a href="http://www.xing.com/" class="targetblank">XING</a></li>
<li><a href="http://www.rss.com/" class="targetblank">RSS</a></li>
</ul>
JavaScript code:
window.onload = function() {
// Code if document.getElementByClassName() doesn't exist
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className) {
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
}
}
var anchorList = document.getElementsByClassName('targetblank');
for (var i in anchorList) {
anchorList[i].target = '_blank';
}
}
Of course, you can omit the window.onload if you already include it elsewhere, but I recommend using it (or using another load function, such as JQuery's $(document).ready();
) so the JavaScript loads when the page finishes loading. Now, all you need to do is give each anchor link a class of "targetblank
", and the links should open in a new tab.