abbr

< html‎ | elements
Jump to: navigation, search

abbr

This article is In Progress.


W3C Recommendation

Summary

Use the abbr element to indicate an abbreviation or acronym.


Overview Table

DOM Interface HTMLElement

The abbr is a phrasing-level element used to indicate an abbreviation or acronym. It can’t contain block-level elements, but it can contain other phrasing type elements.

The abbr element’s role has been expanded to incorporate the role previously performed by acronym element (which has been deprecated).

Attributes

A abbr element may optionally have a title attribute that must contain an expansion of the abbreviation (and nothing else). The abbr element can accept any attributes permitted globally (e.g. class).

Examples

View live exampleThe following example shows how to use the abbr element with an optional title attribute.

HTML

<p>The national capital of the 
United States is located in Washington, 
<abbr title="District of Columbia">D.C.</abbr>.</p>

Usage

Abbreviations don’t have to marked up in the abbr element, but it can be useful

  • When you want to provide an expanded version of the term;
  • When you are using a term that may be unfamiliar to your audience; or
  • When you want to visually-separate abbreviations from other content on the page (using CSS).

In the first two instances, it would make sense to include an expansion of the abbreviation in a title attribute.

Notes

If you use the same abbreviation multiple times in a document, you might consider using a title' to expand the first instance (perhaps wrapping it in a dfn element to mark it as the defining instance) and then leave the title attribute off of the additional instances. This may provide a better reading experience for assistive technologies, but it should be noted that the instances without title attributes will not provide the expanded text as each abbr is independent (expansions are not shared among identical abbr elements).


Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?