<abbr> Abbreviation
An abbreviation or acronym, with an optional expansion in title.
<abbr> marks an abbreviation or acronym like HTML or km. Its title attribute can hold the full expansion.
That title only shows up as a tooltip when a mouse hovers over it, so touch and keyboard users never see it. Write the full form in the text the first time, as in HyperText Markup Language (HTML), and treat abbr with title as a bonus.
The abbr element in the WHATWG standard (opens in a new tab) notes that title should contain only the expansion. Defining a term is a job for the dfn element.
Syntax
<abbr title="Full form">ABBR</abbr>When to use it
Put <abbr> on abbreviations that might puzzle some readers: an organisation name like WHO in a health article, a unit like kPa in a technical guide, or an industry acronym in a job advert. You do not need to wrap every abbreviation on the page. Mark the ones worth explaining, or use abbr as a hook for styling, such as letter-spacing on capital letters.
When you also define the abbreviation, put abbr inside dfn so the defining sentence is marked. For a long list of abbreviations, a glossary with dl is clearer than tooltips.
A detail from the standard: if the abbreviation is plural, the expansion in title should be plural too. FAQs expands to "Frequently Asked Questions" and APIs to "Application Programming Interfaces", not to the singular form. Also, title is inherited by nested elements, so do not put a title on a parent element that contains abbr unless you intend it to apply.
Attributes
| Attribute | What it does |
|---|---|
title | The full form of the abbreviation. |
Live example
Edit the code and watch the preview.
<p>Pages are written in <abbr title="HyperText Markup Language">HTML</abbr>.</p>More examples
Plural abbreviations
When an abbreviation is plural, its expansion in the title attribute is plural too. The browser shows the expansion when a mouse pointer rests on the abbreviation. Touch screen users will not see that tooltip, so keep expansions short and simple.
<p>Read our <abbr title="Frequently Asked Questions">FAQs</abbr> before you call.</p>
<p>The laptop has two <abbr title="Universal Serial Bus">USB</abbr> ports.</p>Expansion in text, then abbr
The full name appears in the text at first use, so every reader sees it. Later mentions use abbr with title as an extra reminder, styled with a dotted underline.
<p>The World Health Organization (<abbr>WHO</abbr>) publishes advice on healthy eating.</p>
<p>The latest <abbr title="World Health Organization" style="text-decoration-line:underline;text-decoration-style:dotted">WHO</abbr> report covers sugar.</p>Tip: Write out the full form in the text the first time.
Browser support
abbr works in all current browsers. Most show a dotted underline when the element has a title, and the title appears as a tooltip on mouse hover only. The older acronym element is obsolete in the Living Standard. Internet Explorer 6 did not support abbr.
Accessibility
Screen readers do not reliably read the title attribute, and touch devices never show it. Expand the abbreviation in visible text the first time it appears (WCAG 3.1.4). The W3C note Understanding Abbreviations (opens in a new tab) lists ways to provide the expanded form.
Common mistakes
Wrong
<acronym title="Cascading Style Sheets">CSS</acronym>Right
<abbr title="Cascading Style Sheets">CSS</abbr>acronym is obsolete. Use abbr.
Frequently asked questions
How do I show the full form of an abbreviation in HTML?
Wrap it in <abbr> and put the expansion in the title attribute: <abbr title="World Health Organization">WHO</abbr>. Desktop browsers show that title as a tooltip on hover. Touch and keyboard users cannot see tooltips, though, so spell out the full form in the text the first time it appears as well.
Is the acronym tag still valid?
No. <acronym> is obsolete in the HTML Living Standard, and <abbr> now covers abbreviations and acronyms alike. Browsers still render old acronym tags. Validators flag them as errors, and they offer nothing abbr does not, so swap them out when you update old pages. The distinction the old tag tried to draw is explained in Wikipedia's article on acronyms (opens in a new tab).