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