Spell It Out For Your Users

Sometimes we get so caught up in geek talk that we lose readers in the maze of abbreviations and acronyms. Have you ever felt confused looking up information on mortgage rates, or car financing terms, or credit card agreements? They are replete with terminology that is hard to understand. How can we decypher cryptic words to users without cluttering content with too many inclusions in parentheses, square brackets, footnotes, etc?

HTML 4 defines two interesting tags: <abbr> and <acronym>. The two of them represent abbreviations (Mr, Esq, Ltd) and acronyms (MCP, ASP, IEEE). There's no way to tell if one of these tags has been applied to some text or not. With the help of a CSS rule it's easy to make them stand out:

abbr, acronym {
    border-bottom: 1px dotted #000;
    cursor: help; 
}

I prefer to give abbreviations and acronyms a slight underline with a question mark cursor. To explain what an abbreviation or acronym means you need to give it a title attribute:

<acronym title="Institute of Electrical & Electronics 
Engineers">IEEE</acronym>

Consequently, when the user mouses over it the tooltip will show what IEEE stands for.

The Gotcha

Acronyms are nicely supported across browsers, but the when it comes to abbreviations Internet Explorer/Win has a problem. For some reason, IE/Win doesn't support the <abbr> tag even though "it's in the book".

You will find traces of many online battles over the use of <abbr> over <acronym>. Some people go to great lengths to draw a big fat line between the two. In theory they are right, but in reality you have a major browser that ignores a standard tag. Try this page in Internet Explorer, Firefox and Opera and see which ones display Mar. correctly.

One practical workaround would be to ignore the semantic difference of the two and stick to the one that does work—the <acronym> tag. Code purists will flame me to death. Therefore you may choose to use JavaScript to help IE understand the <abbr> tag. I personally try to stay away from this JavaScript hack which in some cases forces you to wrap abbreviations in <span>s.