Why Use the acronym and abbr tags?

The <abbr> and <acronym> tags are a very useful little feature of HTML4 (and above). They are not that well known partly because:

  • Very few HTML editors support these tags (by providing a toolbar button, for example) - see our own Dreamweaver 4 modifications that take care of this
  • People make assumptions that an abbreviation or acronym is well-known anyway and so never expand on the likes of XML, for example

However, adding the <abbr> or <acronym> tag with the appropriate title attribute can benefit you and people browsing your sites in a number of ways:

  • A screen-reader should be able to read out the full description of the abbreviation/acronym - a great thing for blind and visually impaired users of your site; for sighted users it is not necessary to repeat the full abbreviation/acronym on screen at every mention
  • For people who do not know the abbreviation/acronym, a quick hover of the mouse over the phrase in question will reveal the full description in a tooltip
  • It saves having to create a separate glossary page and referring people to that page at each and every mention of an abbreviation/acronym
  • For people using Mozilla/Netscape 6+/Phoenix, the abbreviation/acronym is indicated on screen with a subtle dotted underline - a very handy feature for drawing attention
    Mozilla highlights acronyms with a subtle dotted underline
  • Your pages are eminently more searchable to the likes of Google, Yahoo, Inktomi and so on
  • If you start using it, so will others ... and so will others. These are great tags (if you can get your head around them) - the more people see how useful it can be, the more we'll see it being put to good use!

So, with that it mind ... why not try out the Acrobot now?

What's an Acronym? What's an Abbreviation?

Quick semantics lesson ...

All salmon are fish but not all fish are salmon. Similarly all acronyms are abbreviations but not all abbreviations are acronyms. Confused? Let us explain ...

  • An abbreviation is just that - a string of words that have been reduced in some way, or even a single word that's been abbreviated (for example, btw meaning 'by the way'). If the abbreviation is made of of the initial letters, it's known as an 'initialism' and each letter is read out:
    • NSPCC pronounced "Enn Ess Pee See See"
    • RNIB pronounced "Arr Enn Eye Bee"
      [unfortunately, there is no <initialism> tag]
  • An acronym is a special kind of abbreviation. Either by luck or design, the initial letters make up an abbreviation that can be read aloud as a word in its own right:
    • NASA pronounced "Nassa"
    • GUI pronounced "Gooey"

So, to decide whether you should use an <acronym> or <abbr> tag, use the test above - "Can I say the abbreviation as a word in its own right?". If yes, use an <acronym>.

Why does the tool give the option to generate acronyms only?

Well, the most used browser - that's Internet Explorer - unfortunately does not support the <abbr> tag. It does support <acronym>, however. So, if you choose to generate only <acronym> tags using this tool, you won't be semantically correct, but you will undoubtedly help a great many people by revealing the hidden abbreviations. Oops, we mean acronyms. Oops, except they're not actually acronyms .... you understand the dilemma?

If you do want to be semantically correct - and we would encourage this! - choose the first radio button "Use abbr and acronym".

What's all this business about adding a <span> tag?

It's a workaround. Given that Internet Explorer (Windows) doesn't support the <abbr> tag, the tool gives you the option of adding in an additional <span> with a class of abbr tag inside the <abbr> tag. Guess what? A <span> with a title does display as a tooltip in Windows. Unfortunately it does mean that you are duplicating markup somewhat, but you need to make the decision about whether this is more important, based on what you know of your audience.

So, with this option checked, you can expect something like this:

This is <abbr title="HyperText Markup Language" lang="en"><span class="abbr" title="HyperText Markup Language" lang="en">HTML</span></abbr>

If you want to highlight the abbreviation on screen, you can then apply a suitable style using CSS:

abbr, span.abbr {
font-weight:bold;
border-bottom:1px dotted #000000;
}

There are some abbreviations missing ...

Normally, at this point, I'd say that you can add your own, but this facility is temporarily down (part of the whole move from ASP to PHP).

How can I make my <abbr> and <acronym> tags more obvious?

In Mozilla/Netscape 6 (and possibly others that we are not aware of), these tags are highlighted with a subtle dotted underline. However, you can style them any way you like as long as it's valid CSS. On this site, we use a help cursor for these tags - as you hover over them, the cursor changes style (not everyone agrees with the use of a help icon for this purpose). Of course, you could try making them all bold, or do any number of colour changes - whatever works in the context of your site.

abbr, acronym {
cursor:help;
font-weight:bold;
}