maxdesign.com.au

Published:

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

Why use the <abbr> element?

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> elements:

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:

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:

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:

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:

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:

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> element 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:

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:

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 is in a state of hover using:

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