How to implement abbreviation definitions correctly in HTML

This page serves as a simple test of formatting ABBR and ACRONYM so that these HTML tags appear properly in Internet Explorer 6.

Code sample (1):

<abbr title="Getting Things Done">GTD</abbr>

Here's an example: GTD followed by more text.

If you're viewing this page in Internet Explorer 6, you won't see the intended result, which is a dotted line under "GTD".

Here's another example, but with a fix: GTD followed by more text.

In the previous line, you should now see the dotted-underline. This is supposed to prompt the user to point at the abbreviation with their mouse and pause,at which point (after a short pause) they should see a "mouse-over window" (a.k.a. "tool tip" or "pop up") displaying what the abbreviation is short for.

Here's the same sample, but with just the ACRONYM tag: GTD followed by more text.

Here's a simple block of STYLE you can use in your HTML HEAD:

acronym, abbr, span.caps
{
font-size: 0.9em;
letter-spacing: .07em;
}

acronym, abbr, span.caps {
cursor: help;
}
acronym, abbr {
border-bottom: 1px dashed #999;
}

Conclusion

Since abbr doesn't work in IE, but acronym works in IE, Opera, and Firefox, that means "acronym" wins (even if the word isn't being used correctly).
Therefore, despite the backflips proposed by http://www.sovavsiti.cz/css/abbr.html, all you have to do is:

acronym {
padding-bottom: 2px;
border-bottom: 1px dashed #999;

cursor: help;

}
...
<acronym title="Getting Things Done"">GTD</acronym>

See also

• abbreviation vs. acronym vs. initialism (lyberty.com)

---

Permanent link (external site), "abbr IE"