Real World Style

abbr, acronym, & .help

Giraffe peeking out of the DIV...

CSS Help

The ACRONYM and ABBR tags are useful, if little used, tags that use the TITLE attribute to expand the acronym or abbreviation. Most current browsers do nothing to alert your site visitors that there is anything behind the words on the page that can help them make sense of the abbreviation or acronym. Enter CSS.

In your style sheet you can add a bottom border to those tags to draw attention to them on the page. You can also use CSS to change the cursor into a "Help" cursor (usually a question mark) for those browsers that support it. And you aren't limited to HTML tags. Create a class called .help and use SPANs to give more information about words or phrases that your readers might be confused by.

This CSS:

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

is used in conjunction with the TITLE attribute on an ABBR or ACRONYM tag, or a SPAN with class="help", to create an underline effect that is different from the hyperlink underline. Changing the cursor to "help" implies that the word is not clickable, and the TITLE attribute expands the abbreviation or acronym. I first saw this done at a site by Sander Tekelenburg.