← Back to All Tags

<abbr>

Marks shortened textual representations

Quick Answer

What is the HTML <abbr> tag?

The <abbr> tag marks abbreviations and acronyms like HTML, CSS, Dr., or NASA. Use the title attribute to provide the full expanded form, which appears on hover. This improves accessibility for screen readers and helps users understand abbreviated terms, enhancing SEO and content clarity.

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