dfn

The HTML <dfn> element marks the term that is being defined in the surrounding text. It helps readers see which word or phrase the explanation introduces.

What you will learn

What role dfn plays in a definition
How to connect a term with a clear explanation
How it differs from abbr, em, and strong

Basic example

<p>
  <dfn>Semantic HTML</dfn> means choosing elements
  according to the meaning of the content.
</p>

The term inside dfn is the subject being defined. The surrounding sentence supplies the definition, so write it close enough that the relationship is obvious.

Using a title

<p>
  <dfn title="Cascading Style Sheets">CSS</dfn>
  controls the presentation of a document.
</p>

A title attribute can provide the expanded form of a term, but do not hide the important explanation only in a tooltip. The visible sentence should remain understandable.

dfn is not the same as abbr

dfn: Marks a term at the point where its meaning is being defined.
abbr: Marks an abbreviation or acronym. Its expansion can be supplied with title.
em and strong: Express emphasis or strong importance; they do not identify a definition.

Use it where the definition begins

Use dfn for the first or defining occurrence of a term, not every time the term appears later. If a page has a collection of terms and explanations, a list or definition list may provide clearer structure around the individual definitions.

Common mistakes

Wrapping every technical word in dfn without actually defining it.
Using it only to make text italic through default or custom CSS.
Putting a long definition only in title, where many users may not discover it.
Confusing a term’s definition with its abbreviation or visual emphasis.