Over the past few months i have noticed a big increase in the use of the <abbr> tag, particularly on blogs.

Here is an example of sufficient use of the abbreviation tag:

It was 70 degrees Fahr. today!

By default Firefox cleverly produces a dotted underline for the abbreviated word ( in this case Fahr ). Unfortunately Internet Explorer and Safari doesn’t do this so we have to manually apply a style. There are several ways of doing this, a popular method is to use Javascript ( see here ) to automatically add a span to all <abbr> tags. I’m not a massive fan of this, i prefer to keep Javascript down to a minimum wherever possible.

I prefer a simple CSS approach,

abbr {
   border-bottom: 1px dotted;
   cursor: help;
}

This will add a nice dotted line beneath the abbreviated word and help cursor ( see right menu for example ).

The same styling can also be applied to the acronym tag for similar effect.