Russ Weakley
25-Jul-06
Why use the <abbr> or <acronym>
elements?
Types of abbreviations
Abbreviations
Initialisms
Contractions
Acronyms
Confusion over the <abbr> element and "abbr"
attribute
Styling the <abbr> and <acronym> elements
Why use ems instead of pixels?
Why is there no color specified?
Changing the cursor
Support for <abbr> in Internet Explorer 5 and
6
Related articles and information
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.
Shortened form of a word that ends in the same letter
as the word itself.
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;
}
Styled abbreviation and acronym example here
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:
Incorrectly use the <acronym> element instead
of the <abbr> element
Add a <span> element inside the <abbr>
element and applying the same styles to this span
Use JavaScript to solve the problem
Use the abbr-cadabra method
Related articles and information
The <abbr> element
The <acronym> element
HTML is not an acronym
Styling <abbr> in IE
abbr-cadabra
Improved styling abbr in IE
Styling <abbr> in IE: The JavaScript source
