Skip to navigation.

I figure that as this is Page 3 of my website, I ought to have a picture of some naked chicks. Enjoy!

...Mark Up An Abbreviation

There are two HTML elements for dealing with abbreviations: and .

So what's the difference? Although it is generally agreed that any shortening of a word or phrase is an abbreviation, and that some abbreviations are acronyms, there are two schools of thought on deciding exactly which abbreviations are acronyms:

So there is a lot of confusion about which abbreviations are acronyms. For this reason, it is safest to always use . Indeed, is being removed from future versions of (X)HTML.

Problem

Internet Explorer doesn't support . It can't style it with CSS, it doesn't display the title in a tooltip when the mouse hovers over them and it doesn't even add the relevent nodes to the DOM tree. Yet it supports just fine.

This may seem strange — after all, all that needs to be done is for Internet Explorer to handle them both (more or less) the same! However, due to a historical dispute with Netscape, Microsoft have deliberately ommitted support for .

to the rescue!

Despite completely ignoring , Internet Explorer can be coaxed into the appearance of treating it properly using a little hackery involving . For example:



UN

However this involves quite a bit of duplication, especially on an abbreviation-heavy page, so is hardly ideal.

JScript to the rescue!

Instead of manually adding all those tags, Marek Prokop recommends using a little JScript:

function styleAbbr() {
  var oldBodyText, newBodyText, reg
  if (isIE) {
    oldBodyText = document.body.innerHTML;
    reg = /]*)>([^<]*)<\/ABBR>/g;
    newBodyText = oldBodyText.replace(reg,
      '$2');
    document.body.innerHTML = newBodyText;
  }
}
window.onload = function(){
  styleAbbr()
};
isIE = (document.all) ? true:false;

It should be pretty obvious how this works, but Marek explains it all.

Conditional comments to the rescue!

Now we have an almost perfect solution, but we can go a step better in my opinion. Currently, good browsers that support , such as Netscape, Mozilla and Opera, will have to download and execute the JScript above. Because of the if (isIE) condition, execution will be minimal, but it's still better to hide the script from them altogether.

To do this, we can use the misguided magic of conditional comments. Firstly create a file called "abbr.js" (or whatever) containing the code from the section above and then link to it like:

Most browsers will ignore that entire block as it is a comment. Internet Explorer 5+ will think it's special and will download and run the JScript.

This last technique is what I use on this web page.

References

A few of my thoughts on good ways to do navigation.