<abbr> and <acronym> Why, When and How?

The and tags are extremely useful tags that seem to be completely ignored by the majority of the web development populous. I want to tell you why they are useful (and necessary!) for properly communicating to the users that visit your site. I would also like to discuss sensible practice for these tags.

They have been around forever (present in HTML 4 through XHTML 2, although is deprecated in the latter), but nevertheless they are used very sparingly by even standards-minded individuals. Their purpose is simple: to provide the full meaning of an abbreviation or acronym without necessitating a change or explanation in the copy of your design. Obviously, in the interest of creating semantic markup, you should use the tag that fits the situation (I worked for the Krannert School of Mgmt while earning my degree in Purdue's CGT program). Now that we're all understanding the basics, I pose a few questions.

What are you talking about? Why should I bother?

First off, why use them? I just described what they did, but why is it important? Well, in an earlier article I mentioned search engine optimization (SEO). What if you were not familiar with that term? You would have to look it up, which is an inconvenient task, distracting you from my point and probably causing minor frustration. What if you are using a screen reader? A screen reader is not a dictionary, and a page with many abbreviations will sound strange having all those letters read one at a time to the user. These two tags sidestep that awkwardness, providing the screen reader with whole words to speak instead of possibly meaningless letters. The last and possibly most important is SEO. By giving your acronym or abbreviation a meaning, you are telling the search engines that the acronym is associated with your term. It doesn't take a rocket scientist to figure out that this is a Good Thing™.

These tags are easy. The syntax requires a single attribute, either title or full for both tags, although certain versions of XHTML will contain much richer functionality in good times yet unseen.

abbr or TLA

OK, so you'll at least give it a try? Excellent. You are now in the murky waters of unestablished conventions. You may not want to just plaster the tag on every Mr. and Dr., and then again you may want to. Anyone claiming that you should or shouldn't doesn't really know, because as I stated before the group of people that use these tags could probably fit in an elevator together and as such there is no solid data for best practices. You'll just have to use your best judgement, and that may not be easy.

When do I use these? Balancing backward and forward compatibility

As I pointed out earlier, the W3 is killing for some reason. Although an acronym is logically a type of abbreviation, it is semantically different that an abbr, so why they're doing this is beyond me. Especially when Internet Explorer does not support . So as a standalone tag, you can make it work for users now, or you can make it work for future browsers. Furthermore, something like Inc. is not an acronym, and you should avoid tagging content with markup that is deceptive (although it's not as deceptive as using tabular data tags to position elements on a page, HA). I can't offer a solution really because it is your design and you need to decide which users should benefit the most from it. If you are looking for inspiration on simultaneously satisfying the needs of the old browsers, the future browsers, and the non-sighted, I suggest you take a peek at Colin Lieberman's ALA article entitled The Accessibilty Hat Trick: Getting Abbreviations Right.

Not that I am an expert, but I find that a combination of visual explanation and use of the appropriate tag is best for conveying your information. Notice above, where I mentioned SEO, first spelling it out, then providing the common acronym. Thereafter, I have simply used the acronym. Users will be introduced to the concept before the acronym and will not even need to mouse over to figure it out, although if they forget they can be reminded quickly. Screen readers will still have a reference and people who are hearing this will still hear it as full sentences.

Another nice touch is to use the CSS property cursor: help;. You may see that the cursor changes to a question mark when you mouse over some of my abbreviations. This isn't automatic. Given that some browsers will underline the and to help visual users discover them, I feel it provides useful feedback distinguishing it from a link. Wow, with all that, I end up delivering more text than if I had just spelled it out! Well, on this blog unfortunately I don't have a choice. However, if you're designing and styling the site, you just need to write it once in the stylesheet and you're set:

abbr, acronym      {      cursor: help;      }

Then you're back down to just the tag and its contextual meaning. Obvously this would be a convenient place to turn that default border-bottom off that occurrs in some browsers if it suits you, but I usually leave it for usability's sake since it is a piece of hypertext.

Closing Thought

As developers and designers jump on the standards bandwagon, we will see more sites incorporating this feature. As I said before, it is often useful, sometimes necessary, and always advantageous for those of us concerned with delivering content to the widest audience possible.

Archived at my site