How HTML acronyms and abbreviations can help online journalism

Written by Adrian Holovaty on December 17, 2002

Dammit, I'm tired.

Tired of AFI, tired of FEMA, tired of MAC.

I've overdosed on USF and EPA. I can't handle MLB and FDA. BET and SAS don't make things much better.

And I've had more than enough of GOP.

You see, I just can't keep track of acronyms. Unfortunately, though, it seems like every worthwhile news story has one. Or two. Or five.

I understand their allure. Reporters are keen on using them in articles, because they cut on word count and aid the flow of a story. Editors love their compactness when they're tasked with writing a headline that must fit in a small space -- say, a single column of newspaper type.

But for readers, these things can get confusing -- especially when a story juggles three or four of them. Fortunately, HTML provides convenient methods for defining acronyms and abbreviations. Unfortunately, few news sites use them.

For those reasons (and others), every acronym and abbreviation in a news story should be defined.

It's easy to do. (And this is old hat for many Holovaty.com readers, so bear with me.) When you've got an acronym or abbreviated phrase, surround it with either <acronym></acronym> or <abbr></abbr>. Then spell out the acronym (or unabbreviate the abbreviation) and stick that in the title="" attribute, like so:

<acronym title="Bachman-Turner Overdrive">BTO</acronym>

...or...

<abbr title="Sergeant Pepper's Lonely Hearts Club Band">Sgt. Pepper's</abbr>

The result: Users of modern browsers will see the fully spelled-out phrase in a browser tooltip when they mouse over the text.

(There is some discord over the difference between the two tags, but I won't get into that. See Ben Meadowcroft's explanation and Craig Saila's thoughts on usage for more.)

(Additionally, you can use CSS to style your acronyms and abbreviations in a certain way. For instance, this site gives them a light, dotted underline and changes the cursor into an arrow with a question mark. More information on this technique is at Dive Into Accessibility.)

When it comes to online news, this technique would benefit both parties involved: The readers, and the journalists themselves.

Helping the readers

This one's a no-brainer. Acronym and abbreviation definitions clear things up. They make article comprehension easier for folks who have a tough time with alphabet soup, and they stay conveniently out of the way of people who know what the phrases mean already.

Examples:

  • Pop-culture references that some readers might not understand: J Lo, Britney, Dickie V
  • Geographical locations: Miss., Mass., Minn. (The Web is global. Not everybody cares to memorize the U.S. state abbreviations.)
  • Time zones: 5 p.m. EST
  • Dates: Tues., Dec. 17. (This may seem silly to you, but put yourself in the shoes of a reader with poor English skills. I, for one, certainly could use help with Spanish abbreviations.)

Helping the journalists

HTML acronyms and abbreviations are a headline writer's dream come true. Even on the Web, editors are concerned about headline length and "fitting" headlines in alloted spaces. (I spent a summer at washingtonpost.com and recall working hard trying to piece together headlines that were short enough for the home page but still made sense.) But the <acronym> tag makes things easy.

No longer should editors mumble, "Is Karzai well-known enough to be referred to in a headline by only his last name?" They can simply use Karzai's last name in the headline and let curious users mouse over the word to find out his full name and title.

No longer should headline writers wonder, "Do most people know what HCFA is?" The people who do, will. The people who don't, will look to see.

This could even be a chance for editors to use more unconventional abbreviations. But I'm not advocating nonsensical abbreviations, such as, well, PNYCTRP, that a reader couldn't possibly figure out. Rather, here's a good rule of thumb: If at least 25 percent of your readers will know what the acronym means, use it. Otherwise, spell it out. Either way, use <acronym> and <abbr>.

Real-world headline examples:

A side note: First-mention, or always?

Some say it's only necessary to define an acronym or abbreviation on its first occurrence. I disagree with this. It's no good defining an acronym in the first paragraph of a news story if you're not going to remind people what it is 20 paragraphs later. (That's the semantic-markup version of dropping the ball.)

A reader should not have to scroll a half-dozen paragraphs up a document just to be reminded of what an acronym stands for. Acronym definitions aren't just one-time explanations; they're also reminders.

Comments

Posted by kpaul on December 17, 2002, at 10:20 a.m.:

Great article.

I've been having probs with NS7 on my Mac, so I'm using IE5, which only shows a question mark.

Also, I bet something like this could easily be built into a CMS system - that is, when something is posted that contains a word in ALL CAPS, check it against a table with definitions? If you do it once when you input info, you wouldn't have to worry about the performance hit too much.

Just some thoughts.

And, BTW (just had to use another one:), I'm tired too.

Posted by Sara on December 17, 2002, at 10:30 a.m.:

It's all about making things easier and more accessible to readers, whether we work online or in print.

There are so many things online news sites have the capability do better, if only the techies could think like copy editors. And, to be fair, vice versa. This is a fantastic example of one of them - a way to step even further beyond shovelware and create a truly useful, intuitive product.

Bravo, Adrian.

Posted by wink on December 17, 2002, at 12:02 p.m.:

In addition to unabbreviating acronyms, the acronym tag can be used to provide short footnotes to your text. This fact was implied in the examples where a last name was tagged and the full name and title were provided in the tooltip. I just want to make it explicit that the acronym tag can be stretched to include a bit more functionality (though overloading the tag may cause problems with the semantic web)

Posted by kebio on December 17, 2002, at 1 p.m.:

Acronyms can also be used for providing translations for uncommon foreign loanwords in text. For example: <acronym title="Colloquial term for foreigner living in Japan">gaijin</acronym>

Posted by Rich on December 17, 2002, at 1:29 p.m.:

kpaul - your tooltip won't have worked in IE5 if you were using an <abbr> tag AOT <acronym>. For some reason IE refuses to handle <abbr>, even in IE6 AFAIK.

For that reason, you may consider sticking to <acronym> even when you're dealing with an abbreviation.

I notice Adrian carefully skirted around the issue of what actually constitutes an acronym. In current day context there seems to be some confusion even in dictionaries, so much so that I'm not prepared to go into it here :-) You could try this Evolt article for more discussion.

Posted by Brian on December 17, 2002, at 4:03 p.m.:

Some of the issues with semantics can be helped using a simple <span> tag. Just define it a style to match that of an acronym or an abbr, then get it a title attribute and you're all set. That way you can avoid using <acronym> to display things such as names or other footnotes, and still get the same effect. I'm not sure about what kind of browser support this technique has, though. Can anyone shed some light on the subject?

Posted by Haiko on December 17, 2002, at 7:12 p.m.:

For those using Movable Type: Mark Pilgrim described how to automagically convert acronyms within postings into <acronym title="... ...>, using a MT plugin.

Posted by Carl on December 18, 2002, at 12:18 a.m.:

RE: First-use rule

People often scan stories on the net, rather than read them straight through. This makes it easy to pass through the introductory sections where "first-use" would normally apply. But I'm not sure that the added "consumer-friendlyness" is worth the hassle.

Defining them each and every time, in each and every article, could be seen as just too time consuming, and gives more chance for human errors to creep in.

We don't, for example, use people's full names and titles in every paragraph. We shorten it, we use "him" and "them". To be logically consistent, we should have a title for every "she" and "it" in every story!

What is harder on the reader: forgetting what NAFTA stands for? Or coming into a paragraph that says "the senator" and not knowing who in the world is being referred to?

My point? Just as we don't write stories for a third-grade level, or define all 75-cent words, or always give full names, it makes sense to not mark up each and every abbreviation. It seems to be overkill.

Posted by Marek on December 18, 2002, at 3:29 a.m.:

Brian: using the <span> element is a good idea and it is possible via JS+DOM. See my article Styling <abbr> in IE.

Posted by Andreas on December 20, 2002, at 1:50 p.m.:

Using span, as mentioned above, isn't semantically correct. You heart's in the right place, but with the same logic, we should start using complex javascripts to make <abbr> and <acronym>-like features available to NN4 (that would be "Netscape Navigatior 4.x" since I can't make that tag).

For the web as a whole, and standards compliance - I'd use the tags as correctly as possible. Newer, proper, browsers will display them correctly while older browsers... Well, they've never really diplayed anything correctly, now have they?

Posted by gina setser on December 20, 2002, at 6:28 p.m.:

I'm using IE 5.1 on a Mac running OS X 2 and I get a question mark that, after a long pause, spells out the acronym. It takes a long time, and they don't all render.

I think this is a terrific idea if you can get it to render smoothly on all browsers. I also agree with your point on spelling out first-references not being enough. I can't tell you how many times I've had to dig back into a story to figure out who someone is or what institution the story is talking about. I'd like one line, pithy rollovers telling me more about each person in the story so I don't have to figure out things like, "now is this the attorney for the defense or what"?

Posted by db on December 22, 2002, at 10:32 a.m.:

interesting to note in the current xhtml 2.0 draft, there is no < acronym >, only < abbr >.

Posted by Lach on December 29, 2002, at 5:10 a.m.:

I don't agree with marking up the abbreviations for every occurence with their meaning. It takes too much time to work it that way, and also, I use the following rule in my print stylesheet:

acronym[title]:after, abbr[title]:after {

content: " (" attr(title) ")";

}

It'd look a little stupid, in my opinion, to have the acronym or abbreviation's meaning printed after every occurence of it. Hence, I mark-up the first occurence with a title and from then on use the tags without the title. A smart browser should be able to pick up on it and give the same text on hover anyway.

"Acronyms can also be used for providing translations for uncommon foreign loanwords in text. For example: <acronym title="Colloquial term for foreigner living in Japan">gaijin</acronym>"

That's very semantically incorrect. Rather than abusing the acronym tag in that manner you should use <span xml:lang="ja" lang="ja" title="Colloquial term for foreigner living in Japan">gaijin</span> then use CSS to style :not(:lang(en))[title] to be italic and have the dotted underline indicating that you can hover over it for more information. Of course you'll have to fiddle with other selectors until IE/Win stops being so crap at selectors. Obviously, using xml:lang or lang as the attribute will differ depending on the version of HTML / xHTML being used.

Posted by Adrian on December 29, 2002, at 10:41 p.m.:

Lach: I agree that it'd look stupid "to have the acronym or abbreviation's meaning printed after every occurence of it." Why not, then *replace* abbreviations/acronyms with their fully spelled-out meanings?

Posted by Lach on December 30, 2002, at 11:51 a.m.:

Hmm.. I can see your point, Adrian, however that seems to run against the way that abbreviations are generally used in printed media, which is to spell out the acronym the first time, with the abbreviated version in brackets afterwards, and from then on use the abbreviated version, as far as I'm aware.

Of course, you could make it work that way with CSS if we had better selectors with a title on each one, but as it is now, it's all or nothing. Anyone, no-one has to do it my way, but I thought I'd throw that suggestion into the mix. Actually, I have to thank you now, because you've inspired me to change the rule in my print stylesheet to match the way most publications do it. If anyone wants the rule for that, it's:

acronym[title]:before, abbr[title]:before {

content: attr(title) " (";

}

acronym[title]:after, abbr[title]:after {

content: ")";

}

Which should turn '<abbr title="HyperText Markup Language">HTML</abbr>' into 'HyperText Markup Language (HTML)' in browsers that support generated content.

Posted by El T on February 12, 2004, at 8:33 p.m.:

The assumption that people will be bothered to hover over an abbreviation is at best optimistic. Rather than being a godsend for newspapers, the abbreviation tag should be a thorough "no-no" for online news sources. The reason for this is that news tends to be shown as a large clump of diverse news stories; you have to scan for keywords that interest you. If I'm interested in learning something about South Africa, I'm more likely to respond to a headline of "Sth African pres wins again" rather than "Mbeki wins again", even if Mbeki is dotted to indicate there's more detail.

In a world of exploding information, the abbreviation tag commits the deadly sin of hiding potentially interesting information from anyone other than the most conscientious readers.

There are only two cases where I think the abbreviation tag is acceptable:

(1) When an abbreviation is very common but still unknown enough to need spelling out for readers from other cultures. E.g., state abbreviations - Americans will know what "Minn." means, but most others will scratch their heads. A site that has any sizeable non-American audience should therefore use it as a helper.

(2) When referring to an abbreviation mentioned in an earlier, separate component of a work - e.g., a discussion of world political bodies broken across several webpages would do well to remind readers what "OPEC" stands for on the first occurrence on each separate page.

UNHELPFUL uses might include:

(1) Concealing crucial keywords in headlines;

(2) Having the abbreviation underlined in EVERY location - don't baby your readers;

(3) "Imagined" abbreviations like the "PNYCTRP" above; and

(4) Spelling out ultra-basic abbreviations: people who don't know what "US" or "UK" stand for are surely too stupid to be worth catering for. And that includes non-English speakers - someone who thinks they speak the language without knowing those abbreviations is kidding themselves: they're important vocab.

Incidentally, using CSS to present the abbreviation on the first occurrence is bad form. If the user does not have stylesheets enabled, or if the browser doesn't correctly implement the CSS, then the real meaning of the abbreviation is forever hidden from less-technical users who don't know how to display the unabbreviated title. Crucial information should always be included in plain text, and maybe in the alt tag for images (though even then it's of questionable value).

Posted by Scott on March 25, 2005, at 9:35 p.m.:

BAH! The KISS principle applies - (ACRONYM for "Keep it Simple, Stupid")

Why have it emcumbant upon the web authors to utilize <acronym> and <abbr> tags, when:

* * * 1) They are not universally supported (e.g. - MSIE doesn't render the 'title' attribute for the 'abbr' tag);

* * * 2) There is confusion regarding semantically correct usage (e.g. - HTML is not an acronym);

* * * 3) Tag usage for every occurence defeats the very purpose for which abbreviations and acronyms were designed?

Requesting universal acceptance and proper usage from every web author is a travesty.

Consider: A solution easier on BOTH the writer and the reader. One that provides greater acceptance and consistency across the board. What is it? Acronym/abbr-aware browsers utilizing acronym/abbr plug-in lists, including user-defined lists.

Easy on the writer: Let the writer use abbreviations and acronyms on the well-established first-use basis, with or without tags. IF the writer chooses to use tags, an abbr/acronym-aware browser picks up the information in the title attribute and applies it to ALL occurrences of that abbr/acronym (overriding any previously defined abbr/acronyms). IF the writer chooses not to use ANY tags, then the abbr/acronym-aware browser applies whatever abbr/acronym plug-in lists that have been loaded (if any apply). Common abbreviations like US, U.S., Nev., Nev, NV, NASA, etc. would be utilized.

Easy on the reader: Let the reader CHOOSE how to apply the acronym/abbr styling (e.g. - apply a dotted underline with fly-over title, or put the title after the abbreviation in light gray text, surrounded by parentheses, or apply an aural style instead, or apply it on the first occurence ONLY).

Universality: Abbr/acronym lists could be easily made by crawling pages, looking for <abbr> and <acronym> tags, pulling corresponding 'title' attributes, if they are defined. Lists could be made for various categories of web pages. People reading lots of medical HTML documents could insert a medical-oriented abbr/acronym list, or maybe even more specific of a list - internal medicine list. Common lists would be included with browsers: World geography lists (MEX, Ala, AK, etc) , American Organizations list (AMA, AAA, MADD, ALA), Governement (GOP, FEMA, TVA, etc). And lastly, users could write their own custom lists, specific to their interests.

Side Benefits: As a side benefit, I see other usages of such a system. For example, zip-code lists might associate zip-codes with city/town/state names. Telephone number lists might associate telephone numbers with countries, states or towns or addresses.

For me, because of the three reasons above, I'm just sticking with the printed first-occurence usage. I cant' see semantically-incorrect usage of <acronym>, just because MSIE doesn't support "title" for <abbr>. I also can't see going through the extra effort required to mark every occurence, because it's oxy-moronic to do so.

Frankly, I like my solution. :) But what do I know? I'm just a schmo.

Posted by gracefool on May 19, 2005, at 9:35 a.m.:

That could be cool, but IMHO it's too complicated to bother with. You could of course write a Firefox extension / browser plugin for it :p

My tradition is to include a title attribute for the first usage, and tags without titles for later occurences. This is so screen readers use the correct pronunciation (speak: spell-out or speak:normal). As far as I can see, abbreviations/acronyms will always (at least in the near future) need tags for this purpose.

Oh, and I use ABBR, never ACRONYM (according to XHTML2 specs - screw IE). I use ABBR.word to indicate an abbreviation that is pronounced as a word.

Comments have been turned off for this page.