abbr

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

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