HTML abbr: Explain Abbreviations and Use the title Attribute

HTML <abbr> identifies an abbreviation or acronym. Its optional title attribute can provide the full term, but essential explanations should also appear in the visible text so that readers can understand them without a mouse.

Mark an abbreviation and explain its full term

When a technical term first appears, writing the full term alongside its abbreviation helps readers understand it. The abbr element identifies the text as an abbreviation; it does not automatically look up or translate the full term. You do not need to wrap every abbreviation that your audience already knows in this element.

Save the following document as abbreviation.html and open it in a browser. The first sentence keeps the explanation visible, while the second demonstrates the title attribute.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Abbreviations and full terms</title>
</head>
<body>
  <p>Web documents use HyperText Markup Language
    (<abbr>HTML</abbr>) to define their structure.</p>
  <p>Another abbreviation: <abbr title="World Wide Web">WWW</abbr></p>
</body>
</html>

The first sentence displays the full term next to HTML. Depending on the browser, WWW in the second sentence may have a dotted underline, and hovering over it may display World Wide Web in a tooltip. The browser determines the default underline and tooltip appearance, so this is not a design feature that guarantees a consistent visual result.

What belongs in the title attribute?

The title attribute on abbr is optional. If you use it, include the full term represented by that abbreviation, without promotional text or unrelated explanations. A title value on one abbr element does not automatically apply to other abbr elements in the same article. If you remove title from the example, the visible abbreviation WWW remains.

Do not confuse the global title attribute with the document’s title element. The title attribute on abbr provides supplementary information about that abbreviation; the title element in the document’s head supplies the page title.

Do not rely on a tooltip alone

Touchscreens do not provide mouse hovering, and access to title information also varies with keyboard navigation and assistive technology. If an explanation is necessary to understand an abbreviation, make it visible in the text, as in the example’s first sentence. Make the content itself readable rather than turning abbr into an unnecessary tab stop or button just to expose a tooltip.

If the explanation is long, write it out near the first occurrence or link to a definition. Consider the reading flow before repeating a full term in title when the same paragraph already explains it. The MDN abbr reference covers usage conditions and accessibility considerations.