Abbreviations — HTML

Abbreviations and Defined Terms

<abbr> marks abbreviations and acronyms so browsers can show a tooltip with the full expansion, and screen readers can announce the long form. <dfn> marks the point where a term is being defined for the first time. Together, they help readers (and machines) understand unfamiliar vocabulary.

<abbr> — Abbreviations and Acronyms

Wrap an abbreviation in <abbr> and add a title attribute containing the full expansion. Most browsers show the title as a tooltip on hover, and screen readers can be configured to announce it.

abbr.html

HTML

<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for web pages.</p>

<p>The <abbr title="World Health Organization">WHO</abbr> published new guidelines this year.</p>

Dotted underline is the default cue

Most browsers render <abbr> with a dotted underline so sighted users know a tooltip is available. Don't rely only on hover, though—the first-use convention below works for everyone.

The First-Use-Expand Convention

A common technical-writing convention is to spell out the full term the first time it appears on a page, with the abbreviation in parentheses. After that, use the abbreviation wrapped in <abbr>. This ensures every reader understands the meaning without needing to hover over a tooltip.

first-use.html

HTML

<p>
  This tutorial covers <abbr title="Application Programming Interface">API</abbr>
  design (Application Programming Interface, or API for short).
</p>

<p>
  A well-designed <abbr title="Application Programming Interface">API</abbr>
  is predictable and consistent.
</p>

<dfn> — Defining a Term

<dfn> identifies the term being defined within the sentence that defines it. It is not meant for every later use of the word—only the point where the concept is introduced. Browsers typically italicize <dfn> by default.

dfn.html

HTML

<p>
  A <dfn>closure</dfn> is a function bundled together with references to its
  surrounding state, giving it access to variables from an enclosing scope.
</p>

<p>
  In HTML, a <dfn id="def-void-element">void element</dfn> is an element
  that cannot have any children, such as <code>&lt;img&gt;</code> or
  <code>&lt;br&gt;</code>.
</p>

dfn vs abbr

These elements solve different problems. <abbr> expands a short form into its full text, while <dfn> marks the sentence that defines a new concept. A glossary entry can use both—for example, placing <dfn> around a term that itself contains an <abbr>.

Combining <abbr> and <dfn>

combined.html

HTML

<p>
  <dfn><abbr title="Search Engine Optimization">SEO</abbr></dfn> is the
  practice of improving a site's visibility in search engine results without
  paying for placement.
</p>

Quick Reference

Element	Purpose	Key attribute
<abbr>	Marks an abbreviation or acronym and provides its expansion	title
<dfn>	Marks the term being defined	None required

Always include a title attribute on <abbr> so the full expansion is available.
Spell out unfamiliar acronyms on first use before relying on the abbreviation.
Use <dfn> only at the point where a concept is defined.