Styling abbreviations and acronyms

Date: 25 July 2006
Author: Russ Weakley

This article discusses types of abbreviations, how to mark them up and how to style them.

Why use the <abbr> or <acronym> elements?

These elements are used to add additional meaning to web content. The element is wrapped around the relevant content and the title attribute is then used to provide the additional information. For example:

<abbr title="association">assoc.</abbr>

Theoretically two groups of users can benefit from <abbr> or <acronym> elements:

  • Users of assistive devices such as screen readers and refreshable Braille devices – although it has been shown that many users of these technologies cannot access the title attribute.
  • Sighted users who do not understand what the abbreviation or acronym means.

Types of abbreviations

The word “abbreviation” comes from the Late Latin word abbreviare (to shorten) which is related to brevi (short). While some people disagree, all methods of shortening words or phrases are subsets of abbreviation.

Some of these subsets include:

  • Initialisms
  • Contractions
  • Acronyms

Abbreviations

Defined as: A shortened form of a word or phrase used for brevity in place of the whole, consisting of the first letter, or the first few letters, followed by a period (full stop).

Examples:

  • assoc. is an abbreviation for association

Example marked up:

<abbr title="association">assoc.</abbr>

Initialisms

Defined as: An abbreviation pronounced as the names of the individual letters formed only from the initial letter of constituent words. This distinction is supported by many dictionary definitions, but not by all. The first recorded use of the word initialism in the Oxford English Dictionary (OED) is in 1899.

Examples:

  • USA is an initialism for United States of America
  • IE is an initialism for Internet Explorer
  • CSS is an initialism for Cascading Style Sheets
  • IRS is an initialism for Internal Revenue Service

As there is no HTML "initialism" element, the content would be marked up with the "abbr" element. Example marked up:

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

Contractions

Contractions come in two forms.

  1. Shortened form of a word that ends in the same letter as the word itself.
  2. Short way to write two words as one by writing the two words together, leaving out one or more letters and replacing the missing letters by an apostrophe.

Examples:

  • Ave is a contraction of Avenue (type 1)
  • can’t is a contraction of cannot (type 2)
  • won’t is a contraction of will not (type 2)

There is no (X)HTML "contraction" element. However, it is probably very rare that anyone would want to specifically mark up a contracted word.

Acronyms

Acronyms are a subset of abbreviations, as they are still shortened words. However, they are more specific. An acronym is defined as a WORD formed from the initial letters of a multi-word name. The important point here is that an acronym must be a WORD – this means that the joined initial letters must be able to be pronounced.

Examples:

  • OPAC is an acronym for Online Public Access Catalog
  • Qantas was originally an acronym for Queensland and Northern Territory Aerial Services Ltd
  • Modem is an acronym for Modulator-Demodulator

Example marked up:

<acronym title="Radio Detecting And Ranging">radar</acronym>

Confusion over the <abbr> element and “abbr” attribute

ABBR is confusing as it is both an HTML element as well as an attribute. But more importantly, they play completely opposite roles.

The <abbr> element is used to provide additional information about abbreviations, initialisms and contractions using the title attribute. For example:

<abbr title="association">assoc.</abbr>

The “abbr” attribute is used to provide shorter information to assistive devices such as screen readers when they are “reading out” tabular information. For example:

<th abbr="screws">Long pointy screws</th>

Styling the <abbr> and <acronym> elements

The<abbr> and <acronym> elements are often styled with a dotted underline as opposed to the solid underline used for hyperlinks. This shows the user that they can interact with the element, but that it is not a standard hypertext link.

This can be achieved with a shorthand CSS rule like:

abbr, acronym
{
	border-bottom: .1em dotted;
}

Why use ems instead of pixels?

Using a value specifed in ems will allow the width of the border to match the relevant font size, no matter how large or small.

Why is there no color specified?

The shorthand border-bottom property allows three values to be definied at once. These are:

  • border-width
  • border-style
  • border-color

Each of these values has an “initial value” – a value that will be applied by the browser if it is not specified by the author. The initial values are:

  • border-width has an initial value of “medium”
  • border-style has an initial value of “none”
  • border-color has an initial value of the ‘color’ property

If no color is specified by the author, the initial value is used. For border-color, the initial value is “the value of the color property”. This means that the border color will always match the color of the text.

If the colour of your text changes in different areas of the site or even within a particular page, then leaving the border-bottom color unspecified is an advantage as it does not have to be re-specified every time the content changes color.

Changing the cursor

You can also assist users by changing the cursor type when an abbreviation or Acronym is rolled over using:

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

Support for <abbr> in Internet Explorer 5 and 6

Internet Explorer 5 and 6 for Windows do not support the <abbr> element. This leaves developers with a range of choices:

Translations

Comments so far

  1. MBA2010 says:

    In your list of “Types of abbreviations” you forgot “mnemonics”.

    A mnemonic can be many things but very often forms into a quasi-acronym or contraction style of abbreviation. Note the following from http://www.techterms.com/definition/mnemonic


    A mnemonic (pronounced “nemonic”) is a pattern that can be used as an aid for memorizing information. Most often, this pattern consists of letters or words. For example, the phrase “Every Good Boy Does Fine” can be used to help music students remember the notes of the staff, E, G, B, D, and F. The name “Roy G. Biv” is often used to memorize the order of colors in a rainbow (or other light spectrum) — Red, Orange, Yellow, Green, Blue, Indigo, Violet.

    While initials of words are commonly used as mnemonic devices, rhyming words and poems can also be used to memorize information. Furthermore, images can be associated with words or phrases to help memorize them. Because the human brain organizes information in “chunks,” mnemonics help people categorize information better, which makes it easier to remember.

    Also see http://en.wikipedia.org/wiki/Mnemonic