The <abbr> element
The <abbr> tag marks an abbreviation or acronym, such as HTML, CSS or Dr. Its optional title attribute holds the full expansion, which most desktop browsers show as a tooltip on hover. For accessibility, also spell out the full term in the text the first time it appears.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, palpable content |
| Content model | Phrasing content |
| Tag omission | Neither the start nor the end tag can be omitted |
| Permitted parents | Any element that accepts phrasing content |
| DOM interface | HTMLElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| title | The full form of the abbreviation. If present, it must contain the expansion and nothing else. |
Common examples
Expanding an abbreviation in the text
The clearest way: write it out in full the first time, then use the short form.
Using the title attribute
The title shows the full form as a tooltip when hovering with a mouse.
A glossary of abbreviations
Combine <abbr> with a description list for a list of terms.
A touch-friendly tooltip
Tooltips don’t appear on phones. A little CSS can show the title after the abbreviation when printing, or you can spell it out in the text.
<abbr> vs <dfn>
<abbr> marks a shortened form like “HTML”, “Dr.” or “Oct.” <dfn> marks the place where a term is defined — the sentence that explains what it means.
They can be combined: the first time you introduce an abbreviation and explain it, you can write <dfn><abbr title="…">API</abbr></dfn>. After that, plain <abbr> is enough.
| <abbr> | <dfn> | |
|---|---|---|
| Marks | A shortened form | The defining instance of a term |
| Used | Any time | Once, where it’s explained |
| Common attribute | title | title or id |
Common mistakes to avoid
- Relying only on the
titletooltip. It doesn’t appear on phones or for keyboard users; spell out important abbreviations in the text. - Wrapping every abbreviation on the page. Explain each one once, usually the first time it appears.
- Using
<acronym>. It was removed from HTML; use<abbr>for both acronyms and abbreviations. - Abbreviations everyone knows. “OK” or “TV” don’t need explaining.
Accessibility & SEO tips
- Writing the full name in the text also helps search engines match people searching for either form (“WHO” and “World Health Organization”).
- Use plain language: abbreviations are a common barrier for people with reading or cognitive difficulties.
- Screen readers may read abbreviations letter by letter or as a word; spelling them out once avoids confusion.
- Keep a short glossary page for the abbreviations your site uses often, and link to it — it helps visitors and gives search engines a clear page for those terms.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions. The dotted underline on abbreviations with a title is the default in most browsers.