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 through the title attribute. This helps users understand unfamiliar terms and provides additional context for assistive technologies.

  • A dotted underline signals to sighted users that additional information is available on hover
  • The help cursor reinforces that the element is informational
  • On hover, the underline color changes to var(--color-interactive) for visual feedback

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

Examples

With <dfn> (First Definition)

Combine with <dfn> when first defining a term. This signals to screen readers and search engines that this is the defining instance.

Variants

Class Effect
(default) Dotted underline + help cursor. Underline color changes to interactive on hover.
.plain No underline. Title tooltip still works on hover.

CSS Reference

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

For maximum accessibility, spell out the abbreviation in parentheses on first use, then use <abbr> alone for subsequent occurrences. This works on all devices, including touch.

Consider tool-tip for Touch

If the expansion must be accessible on touch devices, wrap the abbreviation in a <tool-tip> which responds to tap/focus in addition to hover.

Related

  • <dfn> — For defining terms (often wraps <abbr> on first use)
  • <tool-tip> — For accessible tooltips that work on touch and keyboard
  • <dt> — Abbreviations inside definition terms for glossaries
↑