Acronym and Abbreviation Tags

I think these are two of the most under used tags in HTML, which is a shame because really quickly you can provide some excellent functionality and really help your users out with very little effort on your part.

So, what are they?

The Acronym tag or <acronym> to it’s friends is a tag that should encapsulate all acronyms used on your website.  If you don’t know what an acronym is I would have to <acronym title="Laugh out Loud">lol</acronym> at you and pass you across to this website. (DEPRECATED do not use the <acronym> tag.)

The Abbreviation tag, which has been nicely shortened (I see what they did there!) to <abbr> is a tag which should be used around any text that is an abbreviated form of a longer word.  I can’t think of anything even slightly funny, so if you don’t know what an abbreviation is then go here.

w3.org have the following to say on the subject of acronyms and abbreviations:

The ABBR and ACRONYM elements allow authors to clearly indicate occurrences of abbreviations and acronyms. Western languages make extensive use of acronyms such as "GmbH", "NATO", and "F.B.I.", as well as abbreviations like "M.", "Inc.", "et al.", "etc.". Both Chinese and Japanese use analogous abbreviation mechanisms, wherein a long name is referred to subsequently with a subset of the Han characters from the original occurrence. Marking up these constructs provides useful information to user agents and tools such as spell checkers, speech synthesizers, translation systems and search-engine indexers.


The content of the ABBR and ACRONYM elements specifies the abbreviated expression itself, as it would normally appear in running text. The title attribute of these elements may be used to provide the full or expanded form of the expression.

So now you know what they are and when they should be used, I guess I should write about why you should use them.

First off you would be scoring a really quick win as far as WCAG is concerned, checkpoint 4.2 to be exact.

Specify the expansion of each abbreviation or acronym in a document where it first occurs. [Priority 3]

Secondly, it is semantic - You could argue that this is getting really pedantic in your markup, but it makes sense because the words we encapsulate with these tags are different from normal text.

My third and final point on why I think you should be using it is because it is useful to the end user, accessibility aside it is nice to get a really quick definition of what an acronym on your site is.

In the past I have found a lot of websites that would use a fairly specific acronym to their area of interest and they would wrap an <a> around it and link off to wikipedia, when I think <acronym> along with the context the actual acronym is mentioned in would be more than enough for most users, and those that still don’t know - there is always google!

I guess it is time I actually mentioned how you use them, it is really straight forward.

<acronym title="This is my Acronym">TIMA</acronym>

<abbr title="Personal Identification Number">Pin</abbr>

I would like to know people’s opinions on this, but my thoughts are that you shouldn’t do too much extra styling to these elements other than what you would normally do to the text on your site.  Let the browser handle it the way it wants to, which is normally with a dashed line underneath which I think is fairly universal and looks pretty nice.