Usability Tip:
Explain Acronyms And Abbreviations

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Visitors get annoyed when Web sites use unfamiliar terms without adequate explanation, so keep them happy with these two HTML elements: ACRONYM and ABBR. They help you increase the accessibility and usability of your Web pages by adding additional information about technical or unusual terms. Both are easy to add and help all visitors better understand your content.

When Is An Acronym NOT An Acronym?

There's a surprisingly strident debate among Web designers about the difference between an abbreviation and an acronym. Although the distinction is important, most visitors don't care what you call it - as long as you explain it clearly!

But let's look at the dictionary definitions of both words just to get started:

Trying to decide between them? A handy clue - though not 100% reliable - is to say it aloud. "NASA" obviously sounds like a word, while "UK" and "HTML" are obviously NOT words, but initials spoken individually.

Adding ACRONYMs And ABBRs To Your Page

Both elements require both an opening and closing tag and most browsers (but not Explorer) will automatically add a light bottom underline border to the acronym or abbreviated term to indicate a difference from the surrounding text content.

Those are both valid tags, but visitors don't get much useful information from them. Add a TITLE attribute to the opening element to fully explain the term:

Here's how both elements look in your browser. Depending on your browser and browser version, the cursor may also change to a question mark when you move your mouse over each element:

NASA successfully launched the first manned trip to Jupiter this morning.

The New Market Elementary PTA held its first annual kitten show last Saturday.

If you're using Explorer, you should see a pop-up tooltip that says "National Aeronautics and Space Administration" when you run your mouse over it over the acronym, but see nothing unusual about the "PTA" abbreviation. That's because Explorer browsers ignore the <abbr> element.

In Mozilla Firefox visitors get a visual clue because both elements have a dotted underline and a popup tooltip:

Opera and Netscape perform similarly to Mozilla, but both browsers emphasize the elements even more by placing a dotted box on all four sides.

Your server logs will tell you how many of your visitors use some version of Explorer. It will probably be a sizeable segment - if not an overwhelming majority. If so, you'll have to do a little extra work to make your ABBR and ACRONYM elements stand out from surrounding content.

Emphasize Acronyms Using CSS

Use CSS to add visual cues for Explorer users by adding a STYLE definition to your HEAD section or external style sheet:

Note that we added the cursor:help property/value pair even though the most current browser versions do it automatically. This gives visitors using older browsers the same basic browsing experience as other visitors. This style specification also adds a dotted border around the entire phrase, emulating Opera 7 and Netscape 7. Of course, you can style it further by adding the border just to the bottom, adding a background color, changing the font, etc.

Adding styles creates a more consistent cross-browser display:

Note that with styles, the NASA acronym element displays the same, but Explorer still ignores the ABBR element entirely. That makes the ACRONYM element a safer, more browser compatible technique at this time.

Is This Really Necessary?

Some alert readers may have already asked themselves the perfectly valid question:

"Why not just include the explanation inside the content like this?"

NASA (National Aeronautics and Space Administration) successfully launched the first manned trip to Jupiter this morning.

If you're only going to use that particular abbreviation or acronym once, then you should definitely use this much easier method. However, if you plan to reuse the terms throughout the page or the entire site, then consider the benefits of the styled ACRONYM tag:

Avoid Unnecessary Use Or Excessive Use

For this article, we've used the relatively common acronym NASA as one example, knowing that most readers probably don't need it explained to them. In many cases, NASA would be such a familiar term that enclosing it inside an ACRONYM element would be superfluous. We use it here because it is so common that you can forget the acronym itself and focus on how to use the mark-up to define it.

Suppose you use the same acronym twenty times per page. Should you include the TITLE attribute to explain it each time? Of course not. You'll get frustrated and the code will quickly get bloated and hard to maintain.

Some designers enclose all occurrences of a commonly used acronym inside opening and closing ACRONYM tags, but only add the title once and style it slightly differently. That tells visitors two things:

Here's an example:

NASA successfully launched the first manned trip to Jupiter this morning.

NASA officials described the launch as "absolutely perfect" and "stunning." Of course, NASA officials concede that it will be years before they can declare the mission an unqualified success.

Here, we created a class called "highlight" to add the background color and applied it just to the first instance of the acronym. That reduces the amount of code, supplies a visual cue, and also identifies acronyms/abbreviations using structural tags.

Here's how it looks in your browser:

NASA successfully launched the first manned trip to Jupiter this morning.

NASA officials described the launch as "absolutely perfect" and "stunning." Of course, NASA officials concede that it will be years before they can declare the mission an unqualified success.

You could also just add a special glossary or definition page to your site and define all terms there. Although a glossary can be a great tool for search engine promotion, some visitors won't visit a separate page just to decipher a few unfamiliar terms; instead, they just leave the site entirely.

So these elements - particularly the ACRONYM element - increase the usability of your page for everyone by defining terms on the current page.

They also increase accessibility for some users:

But remember to code them correctly. Always include the closing tag. Otherwise, the rest of your page content will appear to be the world's longest acronym!

Use NetMechanic's HTML Toolbox tool to scan your page for HTML coding errors each time you make a change. Even the smallest error (like forgetting a closing tag) can cause serious page display problems. Some errors will break your page entirely.

Toolbox scans your page for coding errors, browser-specific code, broken links, and slow-loading pages, creates an image catalog, and even creates a corrected version of the page that you can upload to your site.