HTML <abbr> Tag for Acronyms & Abbreviations

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <abbr> Tag in HTML 5

The <abbr> tag is used for both abbreviations and acronyms. The abbr element is one of the phrase elements in HTML.

Any HTML code using the <acronym> tag should be changed to use the <abbr> tag instead because the <acronym> tag is deprecated and no longer a valid HTML element in the HTML 5 specification.

<abbr> Tag Syntax

Rules for coding HTML `abbr` elements

<body>
   ...
   ... phrasing content expected ...<abbr title="meaning">... phrasing content ...</abbr>...
   ...
</body>

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code the abbr element for an acronym or abbreviation where phrasing content is expected.
Begin the abbr element with a starting <abbr> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include a title attribute on the <abbr> tag with the expanded meaning of the acronym.
Include the acronym or abbreviation as the content within the tags.
End the abbr element with a matching </abbr> closing tag.
If the abbreviation stands for a term that is being defined in the same paragraph, wrap a <dfn> tag around the abbr element. If the abbreviation itself is being defined, rather than what it stands for, include a title attribute on the <dfn> tag with the same abbreviation to override the title attribute inherited from the <abbr> tag. See the examples of the <dfn> tag.

Content Model

Content of the abbr element

The content of the dt element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

Optional

The content within the tags may also be a hyperlink that links to the acronym definition and shows the user the meaning of the acronym using a pop-up tool tip:

<abbr>
   <a href="http://www.Acronyms.net/terms/t/Three-Letter-Acronym/"
      title="Three Letter Acronym">TLA</a>
</abbr>

<abbr> Tag Attributes

Attributes of the <abbr> tag

global attributes In addition to the personal attributes of the <abbr> tag below, any of the common HTML attributes can also be coded.

title The title attribute may be coded with the expanded meaning of the acronym or abbreviation in the content of the <abbr> tag. However, browsers tend to ignore the title attribute of the <abbr> tag. To have the browser pop up tool tips with the meaning of acronyms or abbreviations, wrap the <abbr> tags inside <a> tags with title attributes instead, as described by Acronyms .net. Line breaks in the title attribute are preserved. Therefore, the title should not be split across multiple lines.

`<abbr>` Tag Examples

Examples of the `<abbr>` tag in HTML 5

<abbr title="abbreviation">abbr.</abbr>
<abbr title="Three Letter Acronym">TLA</abbr>

Any ampersand, double quote, less than or greater than characters in the title or other attributes need to be escaped using HTML character codes.

<abbr title="Texas A&amp;M University">
   <a href="http://www.Acronyms.net/t/tamu/#Texas-A&amp;M-University"
      style="cursor: help"
      onclick="if(confirm('TAMU stands for Texas A&amp;M University')) return false"
      title="Texas A&amp;M University">TAMU</a>
</abbr>

When the cursor hovers over the acronym, the cursor: help style changes the cursor to a question mark to indicate that more information is available. After a brief pause, the meaning of the acronym is displayed in a pop-up tool tip.

To try it, mouse over this: TAMU

Examples with <dfn>, where an acronym or its meaning is being defined

When an acronym or abbreviation is associated with a definition, it could be either the abbreviated form or its expanded meaning that is being defined. The term being defined is identified by the value of the title attribute of the <dfn> tag.

When an abbreviation is a short form of the actual term being defined, a parent <dfn> tag will also assume the value of the <abbr>'s title attribute, which indicates the term that is being defined is the fully expanded meaning:

<dfn><abbr title="Internet Corporation for Assigned Names and Numbers">ICANN</abbr></dfn>
is the international organization which helps ensure that
Internet domain names are assigned in an orderly manner.

When an acronym's meaning is being clarified by expanding it, then it is the acronym itself that is being defined and the title attribute of the parent <dfn> tag also needs to be coded to indicate it is not the expanded meaning in the <abbr>'s title but the acronym or abbreviation itself that is being defined:

When we use the acronym
<dfn title="RSS"><abbr title="Really Simple Syndication">RSS</abbr></dfn>
it is the abbreviation for <b>Really Simple Syndication</b>, not RDF Site Summary.

There are some good examples of defining acronyms in HTML on the Acronyms.net site.

Changes in HTML 5 - <abbr> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The <abbr> tag should be used instead of the HTML <acronym> tag since the <acronym> tag has been deprecated.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the abbr element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5