Marking up abbreviations with HTML abbr

Abbreviations are useful until the reader has to guess what they mean. HTML’s <abbr> element connects the short form to its expansion:

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

Browsers may show the title value as a tooltip when a mouse pointer rests over the abbreviation. That is a helpful extra, but it should not be the only way essential information is available: touch and keyboard users may not see the tooltip.

For an uncommon abbreviation, write the full term the first time and keep the markup around its short form:

<p>
  Cascading Style Sheets (<abbr title="Cascading Style Sheets">CSS</abbr>)
  describes the presentation of an HTML document.
</p>

Defining the term

When the sentence itself defines the abbreviation, <abbr> can sit inside <dfn>:

<p>
  <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>
  describes the presentation of an HTML document.
</p>

You can style abbreviations, although the default dotted underline already gives readers a familiar clue:

abbr[title] {
  text-decoration: underline dotted;
  text-decoration-color: red;
  cursor: help;
}

I would not mark up every familiar abbreviation on every appearance. Use <abbr> where the expansion removes genuine ambiguity, and make sure the surrounding text still works without a hover tooltip.

← Back to all articles