Styling Abbreviations and Acronyms
By Russ Weakley ; September 11th, 2007
Tagged:  •  
  • Why use the <abbr> or <acronym> elements?
  • Types of abbreviations
    1. Abbreviations
    2. Initialisms
    3. Contractions
    4. Acronyms
  • Confusion over the <abbr> element and "abbr" attribute
  • Styling the <abbr> and <acronym> elements
    1. Why use ems instead of pixels?
    2. Why is there no color specified?
    3. Changing the cursor
    4. 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:

    1. 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.
    2. 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:

    1. Initialisms
    2. Contractions
    3. Acronyms


    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).


    1. assoc. is an abbreviation for association

    Example marked up:

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


    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.


    1. USA is an initialism for United States of America
    2. IE is an initialism for Internet Explorer
    3. CSS is an initialism for Cascading Style Sheets
    4. 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 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.


    1. Ave is a contraction of Avenue (type 1)
    2. can't is a contraction of cannot (type 2)
    3. 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 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.


    1. OPAC is an acronym for Online Public Access Catalog
    2. Qantas was originally an acronym for Queensland and Northern Territory Aerial Services Ltd
    3. 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:

    1. border-width
    2. border-style
    3. 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:

    1. border-width has an initial value of "medium"
    2. border-style has an initial value of "none"
    3. 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;
    <strong>cursor: help;

    1. 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:

    1. Incorrectly use the <acronym> element instead of the <abbr> element
    2. Add a element inside the <abbr> element and applying the same styles to this span
    3. Use JavaScript to solve the problem
    4. Use the abbr-cadabra method



    About the author: Russ Weakley has worked in the design field for over 20 years. During the last nine years Russ has focused on web design through his own business, Max Design. He is also the web designer for the Australian Museum. Russ is also internationally recognized for his presentations and workshops on web development, standards and accessibility.

    Post new comment

    The content of this field is kept private and will not be shown publicly.
    • Lines and paragraphs break automatically.
    • Flash can be added to this post.
    • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

    More information about formatting options

    To prevent automated spam submissions leave this field empty.