content logo

Learn HTML:

Html abbr tag (abbreviation tag)

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.


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>

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

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


Html abbr tag Example


Html abbreviation tag Code


Html abbr tag Tutorial