The Mysterious Acronym Tag

Occasionally, the World Wide Web Consortium or browser developers will introduce a feature that is often overlooked by the majority of the user base. Such a feature is contained within the <acronym> tag in Internet Explorer, Opera and some other (but not all) browsers. (Not in Netscape, for example.)

You probably know that an HTML tag can contain attributes. For example, it is common for an <img> tag to contain an alt attribute, which is used to hold an alternative text description of the image so that blind people can perceive the sense of the image. Similarly, a <form> tag has an action attribute, which specifies the script that will process the form when the Submit button is pressed.

There is a seldom-used tag called <acronym>. It was originally mark up, well, acronyms. There is a very similar tag, also seldom-used, called <abbr>, which is intended to mark up abbreviations. Both of these tags were introduced in HTML 4.0. On the face of it, apart from marking up the text, these inline tags do little else. They cause no special effect in the HTML, and by default they display in the same style as neighbouring text. (Although you could use Cascading Style Sheets to have the <acronym> and <abbr> tagged text display differently.) But the <acronym> tag has a very useful feature that is only implemented in some browsers. 

If you include a title attribute within the acronym tag, IE will display the information in a pop-up window above the cursor when the mouse is held over the text. If you are using IE or Opera, you can try it yourself on the AODC acronym below.

AODC is held in April each year. The 2003 event is to be held on the Gold Coast. Don't miss it!

Note that the cursor doesn't change when over the tagged text, so unless the text was formatted differently, a user wouldn't know that the text held the popup feature . The code for the text above reads in part like:

<p><acronym title="Australasian Online Documentation Conference">AODC</acronym> is held...

The fact that the feature is invisible is a disadvantage. But that disadvantage can be overcome quickly with a little bit of CSS. Two style settings for the acronym tag will make the behaviour a lot more intuitive. We have included these settings on the CSS acronyms used in this paragraph. The settings are:

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

Definition of an Acronym

A word (eg, CSIRO, NATO, or laser) formed from the initial letter or letters of each of the successive parts or major parts of a compound term. In the example above, laser is an acronym for Light Amplification by the Stimulated Emission of Radiation.