<dfn> Definition term
Marks the term that the surrounding sentence or paragraph defines.
<dfn> marks the term a sentence or paragraph defines. The surrounding text is the definition, so the whole paragraph should explain the term.
Give it an id and other parts of the site can link to the definition. Use it once, where the term is defined, and leave later mentions of the word alone. A list of terms with definitions calls for <dl>.
How the defined term is worked out, from title, a single abbr child or the text, is explained in the dfn element definition (opens in a new tab). See also the abbr element.
Syntax
<p><dfn>Term</dfn> is the definition.</p>When to use it
<dfn> goes at the spot where a term is explained: a glossary page, the first paragraph of a textbook chapter that introduces jargon, or a technical document where later sections link back to definitions. Later mentions of the term stay plain or become links to the dfn's id.
For a glossary, combine it with dl: put dfn inside each dt, and the definition in the matching dd. When the term is an abbreviation, nest abbr inside dfn. If you only want italics for a technical term that is not defined there, i fits better.
A common misunderstanding concerns the title attribute. On dfn, title must contain the term being defined, not the definition. Putting the explanation in title, hoping for a tooltip, makes tools treat the whole sentence as the term name. Use title only when the visible text differs from the term itself, for example a short form or a different word order.
Attributes
| Attribute | What it does |
|---|---|
title | If set, the term being defined (when the content is not the term itself). |
Live example
Edit the code and watch the preview.
<p>A <dfn id="def-void">void element</dfn> is an element that cannot have content or a closing tag, like img.</p>More examples
Glossary as a description list
A small glossary uses dl for the structure and dfn inside each dt to mark the term being defined. The dd that follows holds the definition, and CSS can style terms and definitions separately.
<h2>Glossary</h2>
<dl>
<dt><dfn id="def-element">Element</dfn></dt>
<dd>A piece of a page made of a start tag, content and an end tag.</dd>
<dt><dfn id="def-attribute">Attribute</dfn></dt>
<dd>Extra information written inside a start tag, like href on a link.</dd>
</dl>Linking back to a definition
The term is defined once with an id. A later paragraph links to it, so readers who skipped ahead can jump back to the definition. The link works like any other link to an id on the same page.
<p>A <dfn id="def-batter">batter</dfn> is a runny mix of flour, eggs and milk.</p>
<p>Pour a ladle of <a href="#def-batter">batter</a> into the hot pan.</p>Tip: Mark the term only where you define it.
Browser support
dfn has been in HTML since HTML 3.2 and works in every browser, usually shown in italics. The rules for finding the defined term (title, a single abbr child or the text) come from the Living Standard and affect tools. Browsers only display the text.
Accessibility
Explain unusual words and jargon where they first appear. dfn marks that spot, in line with the W3C note Understanding Unusual Words (opens in a new tab).
Common mistakes
Wrong
<p>Every <dfn>element</dfn> on this page uses <dfn>element</dfn> syntax.</p>Right
<p>An <dfn id="def-element">element</dfn> is a piece of markup with a start tag, content and an end tag.</p>Use dfn once, at the actual definition. Later mentions stay plain.
Frequently asked questions
What does the dfn tag do?
It marks a term at the place where it is defined. <dfn> treats the nearest parent paragraph, description list group or section as the definition, as in <p>A <dfn>void element</dfn> is an element that cannot have content.</p>. Browsers show it in italics. What a defining instance is gets explained in Wikipedia's article on definitions (opens in a new tab).
What is the difference between dfn and abbr?
<dfn> marks a term where its meaning is explained, and <abbr> marks a shortened form, optionally expanded with title. You can combine them: <dfn><abbr title="Document Object Model">DOM</abbr></dfn> defines an abbreviation. Add an id to the dfn so the rest of the page can link to the definition.