← Back to All Tags

<abbr>

Marks shortened textual representations

Definition and Usage

The <abbr> element designates abbreviated forms including "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

Employ the title attribute providing expanded descriptions revealed through hover interactions.

Tip: An abbreviation and an acronym are both shortened versions of something else. Both are often represented as a series of letters.
Tip: Marking up abbreviations can give useful information to browsers, translation systems and search-engines.

Browser Support

The <abbr> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

The <abbr> tag also supports the Global Attributes in HTML.

The most commonly used attribute with <abbr> is:

Attribute Value Description
title text Specifies extra information about the abbreviation/acronym. The information is shown as a tooltip text when the mouse moves over the element.

Examples

Basic Abbreviation

Define an abbreviation with a tooltip:

Example

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML Abbreviation

Mark up the HTML abbreviation:

Example

<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for creating web pages.</p>

CSS Abbreviation

Mark up the CSS abbreviation:

Example

<p><abbr title="Cascading Style Sheets">CSS</abbr> is used for styling web pages.</p>

Multiple Abbreviations

Use multiple abbreviations in a sentence:

Example

<p>
  <abbr title="United Nations">UN</abbr> and
  <abbr title="North Atlantic Treaty Organization">NATO</abbr>
  are important international organizations.
</p>

Styled Abbreviation

Style abbreviations with CSS:

Example

<style>
  abbr {
    text-decoration: none;
    border-bottom: 2px dotted #745af2;
    cursor: help;
  }

  abbr:hover {
    border-bottom-color: #5a3fd8;
    color: #745af2;
  }
</style>

<p>The <abbr title="Application Programming Interface">API</abbr> allows different software to communicate.</p>

Abbreviation with Accessibility

Enhance accessibility with aria-label:

Example

<p>
  Please contact <abbr title="Doctor" aria-label="Doctor">Dr.</abbr> Smith
  at your earliest convenience.
</p>

Technical Abbreviations

Mark up common technical abbreviations:

Example

<p>
  Use <abbr title="JavaScript Object Notation">JSON</abbr> for data interchange
  and <abbr title="Extensible Markup Language">XML</abbr> for structured documents.
</p>

Date Abbreviation

Use abbreviation for date formats:

Example

<p>
  The meeting is scheduled for
  <abbr title="January">Jan.</abbr> 15, 2025.
</p>

Try it Yourself

Interactive Example

Hover over the abbreviations below to see their full meanings:

The WWW was invented by Tim Berners-Lee.

HTML and CSS are fundamental web technologies.

Contact Dr. Johnson ASAP.

Best Practices

  • Always use the title attribute to provide the full form of the abbreviation
  • Keep the title text concise and descriptive
  • Only mark up the first occurrence of an abbreviation on a page (optional but recommended)
  • Use CSS to style abbreviations for better visibility (e.g., dotted underline)
  • Consider accessibility - screen readers will announce the full form
  • Don't overuse the tag - only mark up abbreviations that need explanation

Related Tags

  • <dfn>

    Defines a definition term

  • <cite>

    Defines the title of a work

  • <code>

    Defines computer code