abbr and dfn
The abbr tag wraps an abbreviation or acronym. Add a title attribute with the full phrase, and the browser shows a tooltip on hover, while the page text stays short and clean. Screen readers and search engines also read that full phrase.
The dfn tag marks the spot where a term is defined for the first time. When you introduce a new word and explain it in the same sentence, wrap the word in dfn. It tells readers, and machines, that the definition is right here.
Why they exist: web pages are full of acronyms, and forcing every reader to already know them is unfriendly. Abbr lets you expand a term without cluttering the text, and dfn makes definitions findable. Both tags work in every browser and add no visible styling you cannot change.
Using them together
A common pattern nests abbr inside dfn when the definition of an abbreviation appears in the sentence. The dfn points at the term being defined, and the abbr carries the short form with its full meaning on hover.
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the language of web pages.</p>The honest limits
Screen readers can pronounce abbreviations letter by letter when you mark them with abbr, and search engines read the title attribute. But hover tooltips are invisible on touch screens, so keep the definition in the page text too. Abbr is a bonus for desktop readers, not a substitute for explaining a term.
Syntax
<p>Learn <abbr title="Cascading Style Sheets">CSS</abbr> today.</p>Screen Readers Ignore <abbr title="..."> Unless You Expand It On First Use
Tutorials wrap every abbreviation with <abbr title="HyperText..."> - but JAWS/NVDA often ignore title (mobile VoiceOver never shows it) and users hear just 'HTML' with no hint. Better practice from Stack Overflow #45776312: write full expansion inline first time ('HyperText Markup Language (HTML)') and reserve title only if you cannot expand in text. <dfn> marks THE defining instance - use once per term per document, not every occurrence.
<p><dfn>HTML</dfn> (HyperText Markup Language) is...</p> // later just <abbr>HTML</abbr>Good to know
- Abbr shows the full meaning on hover.
- Dfn marks the spot where a term is defined.
- Touch screens have no hover, so define terms in the text too.
- Both add meaning for readers and machines.