abbr (HTML element)

Description

The abbr element is used to provide a fully expanded alternative to an abbreviated phrase. The intention is that browsers and other assistive technologies will interpret this information and present it to the user in an appropriate format when requested.

Some documents, by their very nature, may include numerous abbreviations or acronyms. Marking up each and every one could cause the document to become very unsightly in some browsers—and would be tedious for the author having to mark each one up! A general convention is to mark up the first instance of any abbreviation or acronym.

Use This For …

The abbr element contains the text that’s part of the abbreviation, and has just one attribute: the title attribute.

Compatibility

Support for abbr is varied. Internet Explorer versions 6 and earlier don’t understand the element at all, or make it available in the DOM tree for interrogation.

In all other browsers, the abbr is supported, but in varying visual styles. Firefox and Opera underline a marked-up abbreviation that has an associated title attribute with a light dotted line (this can be styled using CSS); Safari and Chrome recognize the abbr content, but do not draw attention to it with an underline. Firefox, Opera, Chrome and Safari all display the title attribute for the abbreviation as a tooltip (hence, it’s available to mouse users, but not keyboard users).

In Firefox, an abbr would display as shown in Figure 1 when moused over.

Figure 1. The title attribute of abbr shown in Firefox

In Opera 9.2, the tooltip appears in a similar fashion, but with the text “Title:” appended to it, as shown in Figure 2.

Figure 2. The title attribute of abbr shown in Opera 9.2

In Opera 10, the ‘Title:’ prefix no longer shows, behaving more like the Firefox example above.

As a result of the compatibility issues associated with it, many people prefer not to use this element. Instead, they write it out in full in the document in the first instance, as follows:

<p>The page had the phrase PTO (Please Turn Over) written on it. If
    only I knew what PTO meant! So I turned the page to see if that
    revealed the answer.</p>

The ways in which browsers deal with the abbr element—presenting it in a tooltip, underlined, italicized, and so on—do little to help users reading the content in printed form. This provides yet another reason to simply write out the abbreviation in the text, as shown in the HTML above. You may consider using generated content in CSS instead, but that approach is hindered by some browser support limitations.

Despite variations in the presentation of abbr content, the support chart shows that full support is provided by all browsers (except for IE 6 and earlier), as there are no guidelines in the W3C specifications to indicate how browsers should treat such content. If the element is exposed in the DOM tree, and if the browser does something with it, that constitutes full support.