abbr

The abbreviation element represents an abbreviation or acronym, optionally with its expansion shown via the title attribute.

Description

The <abbr> element marks up abbreviations and acronyms, providing an expansion or description through the title attribute. This helps users understand unfamiliar terms and provides additional context for assistive technologies.

Semantic Meaning

The abbreviation element indicates that the enclosed text is a shortened form of a word or phrase. When paired with a title attribute, it provides the full expansion.

  • Screen readers can announce the full form when properly configured
  • Search engines can understand the relationship between abbreviation and expansion
  • Visual users see a dotted underline indicating additional information

When to Use

  • Technical terms: HTML, CSS, API, DOM
  • Organization names: NASA, NATO, IEEE
  • Common abbreviations: etc., e.g., i.e.
  • Industry jargon: SEO, UX, CMS
  • First occurrence: Mark the first use of an abbreviation on a page

When NOT to Use

  • Well-known abbreviations: USA, UK, or terms your audience universally knows
  • Every occurrence: Only mark the first instance or where expansion adds value

Variants

Default

Displays with a dotted underline and help cursor, indicating the title tooltip is available.

The HTML specification defines document structure.

<abbr title="HyperText Markup Language">HTML</abbr>

.plain

Removes the dotted underline while preserving the title tooltip. Use when the visual indicator is not needed.

Use CSS for styling web pages.

<abbr class="plain" title="Cascading Style Sheets">CSS</abbr>

Live Examples

Technical Abbreviations

The DOM allows JS to manipulate HTML elements.

Organization Names

NASA launched the JWST in 2021.

With Definition

Combine with <dfn> when first defining a term.

API is a set of protocols for building software applications.

<dfn><abbr title="Application Programming Interface">API</abbr></dfn>

Common Latin Abbreviations

There are many fruits e.g. apples, oranges, etc.

CSS Properties

Property Value
text-decoration underline dotted
text-decoration-color var(--color-text-muted)
cursor help

Accessibility

  • Title attribute limitations: Touch devices cannot hover, so title tooltips are inaccessible. Consider spelling out the full term on first use.
  • Screen reader support: Some screen readers can be configured to announce abbreviation expansions
  • Visual indicator: The dotted underline signals to sighted users that additional information is available

Best Practice: First Use Expansion

Spell out the abbreviation on first use for maximum accessibility.

The HTML (HyperText Markup Language) defines document structure. Later uses of HTML can use just the abbreviation.

Related Elements

  • <dfn> - For defining terms (often used together)
  • <tool-tip> - For more accessible tooltips