How to implement abbreviation definitions correctly in HTML so that the most people can see them.

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

It's expected that you'll be taking a look at the source code to see the details of what's being done. (Right click with your mouse, and look for the view source option.)

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.

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

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

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 {
  	border-bottom: 1px dashed #999;
  	}
	...
	<acronym title="Getting Things Done"">GTD</acronym>

How to implement abbreviation definitions correctly in HTML so that the most people can see them.

See also