Does that title confuse you? You’re not alone.

Acronyms are everywhere, especially on the Web where technical terms ((X)HTML, CSS, PHP) rub shoulders with shorthand figures of speech (IMHO). In fact, the profusion of acronyms has given rise to a self-referencing acronym of its own – TLA.

So what can we do?

We obviously can’t stop to explain an acronym every time we use it; that would break up the flow of what we’re trying to write. Similarly, footnotes¹ will require the reader to jump from the middle of your carefully-constructed thoughts down to the bottom of the page and back again – useful for going off at a lengthy tangent, but not for briefly expanding an acronym. Likewise, saying “eXtensible HyperText Markup Language ((X)HTML)” looks clunky and breaks the flow of the sentence.

Ideally, we want to expand our acronym, abbreviation or piece of freaky industry-specific jargon without breaking sentence flow.

Semantic (X)HTML to the rescue

There are a couple of lesser-known (X)HTML tags expressly intended for this; <acronym> and <abbr>. When you mouse over these tags, a standards-capable browser will pop up the contents of the title attribute.

Example markup:

1

<acronym title="Cascading Style Sheets">CSS</acronym>

That’s half the trick; the basic markup to use an abbreviation or an acronym. From a usability standpoint, we also need to indicate to the user that something will happen when they mouse over this tag. The average Web user has learned from experience that an underlined word generally indicates affordance – a hyperlink. This can work to our advantage when styling our abbreviation or acronym.

Example CSS:

1
2
3
4

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

So the abbreviation or acronym will have a dashed underline (to differentiate it from a hyperlink) and the user’s cursor, when they mouse over the element, will be transformed into their platform’s default “help” cursor. It’s up to you whether you use these tags every time an acronym or abbreviation occurs, or just the first time in any given page – but it makes sense to use them at least once.

Caveat:

From a strictly semantic viewpoint, each tag should be used appropriately to its content; but unfortunately the real world in the shape of our favourite browser intrudes – Internet Explorer doesn’t recognise the <abbr> tag at all, and so we have to tread a little more carefully and temporarily abandon purely semantic markup. It’s possible to replace the <abbr> tag with <span class="abbreviation"> or something similar, which would enable a simple find & replace when IE finally gets around to fully supporting standards. The same trick can be used for a catch-all “help” tag: <span class="help">. This can be used where a couple of words of explanation would help to expand a term that’s not strictly an acronym or an abbreviation.

In conclusion

The title of this post would make far more sense if it was marked up properly, like so:

TLA Confusion = Comprehension FUBAR.

¹ Like this one. You’ve probably broken off from reading the sentence above to follow this (which is a perfectly natural reaction) but it’ll be a royal pain for you to scroll back up and find the thread of what you were reading, won’t it?