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.
A simple abbreviation is marked up as follows:
<p>The page had the phrase <abbr title="Please Turn Over">PTO</abbr> written on it. If only I knew what PTO meant! I turned the page to see if that revealed the answer.</p>
Use This For …
element contains the text that’s part of the abbreviation, and has just
one attribute: the
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
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).
abbr would display as shown in Figure 1 when moused over.
abbrshown 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.
abbrshown 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