A technical blog post introduces a piece of jargon for the first time, "API", and gives it its definition right away, within that same sentence. How do you tell the browser and the tools parsing the page "this is precisely where this word gets its official definition", rather than just one mention among others in the text?
<dfn> answers that exact need: it marks the exact instance where a term receives its definition, not every appearance of it.
Definition
<dfn> wraps the term at the precise moment it is officially defined in the text. The surrounding paragraph or sentence is understood as carrying the definition of that term, which sets this occurrence apart from every later time the same word shows up again in the article, in plain text.
Syntax and the title attribute
<dfn> carries no attribute of its own, but it is often paired with the global title attribute, which can hold the term's full definition, sometimes more detailed than what the sentence itself gives. That definition shows as a tooltip on hover and stays reachable by some screen readers as an accessible name.
<p>
An <dfn title="Interface that lets two pieces of software talk to each other">API</dfn>
exposes functions that another program can call directly.
</p>Once per term, within a given context
The most important rule fits in one sentence: <dfn> marks the defining instance, a single one, not every appearance of the word. A common confusion is treating it as a plain highlighting tool, dropped onto every occurrence of a keyword across the page, the way an automatic glossary highlighter might.
That is not what <dfn> is for, since it exists precisely to flag THE definition, not every mention of the term. That repeated highlighting behaviour, on every occurrence, is closer to what <mark> does, a tag built for relevance or matching, with no notion of definition attached. Reusing <dfn> on every mention blurs the very landmark it is supposed to provide: where, exactly, is this term defined?
Default rendering and the difference with <mark>
Browsers render <dfn> in italics by default, a visual convention close to emphasis but carrying a different meaning: it is not stressing a word, it is flagging a definition. <mark>, on the other hand, renders with a highlighted background and can appear as many times as needed in a text, at every relevant occurrence, with no notion of definition ever attached to it.
Use cases and best practices
A technical glossary is the most direct example: each entry defines a term once, at the exact spot of its definition. When the term being defined is itself a piece of code, such as a function name, <code> can be nested inside <dfn> to combine both meanings. Define each term only once per page or section, add the title attribute when the sentence alone does not give a full definition, and never use it purely to make a word stand out visually.
Frequently asked questions
Can <dfn> be used every time the word reappears in the article?
No, only at the spot where it receives its official definition in that particular context. Later reappearances stay in plain text, possibly as a link back to that definition, never by repeating the <dfn> tag on every occurrence.
Do <dfn> and <mark> play a similar role?
No, despite a frequent mix-up between the two. <dfn> marks the defining instance of a term, a single time, while <mark> flags relevance or a match, potentially repeated as many times as needed, with no notion of definition attached to its use.
What does the title attribute change on a <dfn>?
It carries a full definition, possibly longer and more precise than what appears directly in the sentence, shown as a tooltip on mouse hover and read by some screen readers as the term's accessible name, useful when the word alone, an acronym for instance, is not enough to grasp its meaning.