<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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.

🚀 Try in Code Playground

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