MDN Web Docs

<abbr>: The Abbreviation element

Reference

The HTML Abbreviation element (<abbr>) represents an abbreviation or acronym.

Attributes

This element only supports the global attributes.

Usage notes

The article How to mark abbreviations and make them understandable is a guide to learning to use <abbr> and related elements.

Typical use cases

It's certainly not required that all abbreviations be marked up using <abbr>. There are, though, a few cases where it's helpful to do so:

  • When an abbreviation is used and you want to provide an expansion or definition outside the flow of the document's content, use <abbr> with an appropriate title.
  • To define an abbreviation which may be unfamiliar to the reader, present the term using <abbr> and either a title attribute or inline text providing the definition.
  • When an abbreviation's presence in the text needs to be semantically noted, the <abbr> element is useful. This can be used, in turn, for styling or scripting purposes.
  • You can use <abbr> in concert with <dfn> to establish definitions for terms which are abbreviations or acronyms. See the example Defining an abbreviation below.

Grammar considerations

In languages with grammatical number (that is, languages where the number of items affects the grammar of a sentence), use the same grammatical number in your title attribute as inside your <abbr> element. This is especially important in languages with more than two numbers, such as Arabic, but is also relevant in English.

title attribute

The optional title attribute can provide an expansion or description for the abbreviation. If present, title must contain this full description and nothing else.

Accessibility concerns

Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.

Example

<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>

This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.

Examples

Marking up an abbreviation semantically

To mark up an abbreviation without providing an expansion or description, simply use <abbr> without any attributes, as seen in this example.

HTML

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

Result

Styling an abbreviation

You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example.

HTML

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

CSS

abbr {
  font-variant: all-small-caps;
}

Result

Providing an expansion

Adding a title attribute lets you provide an expansion or definition for the abbreviation or acronym.

HTML

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>

CSS

abbr {
  font-variant: all-small-caps;
}

Result

Defining an abbreviation

You can use <abbr> in tandem with <dfn> to more formally define an abbreviation, as shown here.

HTML

<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
</dfn> is a markup language used to create the semantics and structure
of a web page.</p>

<p>A <dfn id="spec">Specification</dfn>
(<abbr title="Specification">spec</abbr>) is a document that outlines
in detail how a technology or API is intended to function and how it is
accessed.</p>

CSS

abbr {
  font-variant: all-small-caps;
}

Result

DesktopMobile
ChromeEdgeChromeEdge
video3Yes?No

See also