<dfn> - The Definition Element

The `<dfn>` Element

Inline HTML 3.2

The definition element marks the defining instance of a term - the first time a term is introduced and explained in a document.

Quick Example

<p>A <dfn>browser</dfn> is a software application used to access and view websites.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>A <dfn>browser</dfn> is a software application used to access and view websites.</p>

Syntax

<dfn>term being defined</dfn>

The <dfn> element is typically rendered in italic by default, indicating the term is being defined.

Common Use Cases

Basic Definitions

<p>An <dfn>API</dfn> (Application Programming Interface) is a set of rules that allows programs to communicate with each other.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>An <dfn>API</dfn> (Application Programming Interface) is a set of rules that allows programs to communicate with each other.</p>

Technical Terms

<p>In web development, <dfn>responsive design</dfn> refers to creating websites that adapt to different screen sizes and devices.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>In web development, <dfn>responsive design</dfn> refers to creating websites that adapt to different screen sizes and devices.</p>

With Abbreviations

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the standard markup language for creating web pages.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the standard markup language for creating web pages.</p>

In Glossaries

<dl>
<dt><dfn>CSS</dfn></dt>
<dd>Cascading Style Sheets - a language for styling HTML elements.</dd>

<dt><dfn>JavaScript</dfn></dt>
<dd>A programming language that adds interactivity to websites.</dd>

<dt><dfn>DOM</dfn></dt>
<dd>Document Object Model - a programming interface for HTML documents.</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<dl>
<dt><dfn>CSS</dfn></dt>
<dd>Cascading Style Sheets - a language for styling HTML elements.</dd>

<dt><dfn>JavaScript</dfn></dt>
<dd>A programming language that adds interactivity to websites.</dd>

<dt><dfn>DOM</dfn></dt>
<dd>Document Object Model - a programming interface for HTML documents.</dd>
</dl>

With Title Attribute

The title attribute can provide additional context:

<p>A <dfn title="A secure protocol for transmitting data">VPN</dfn> encrypts your internet connection.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>A <dfn title="A secure protocol for transmitting data">VPN</dfn> encrypts your internet connection.</p>

Multiple Word Terms

<p><dfn>Machine learning</dfn> is a subset of artificial intelligence that enables computers to learn from data.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p><dfn>Machine learning</dfn> is a subset of artificial intelligence that enables computers to learn from data.</p>

Scientific Terms

<p>In chemistry, <dfn>oxidation</dfn> is the process where a substance loses electrons.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>In chemistry, <dfn>oxidation</dfn> is the process where a substance loses electrons.</p>

With ID for References

Link to definitions from other parts of the document:

<p>A <dfn id="def-html">HTML</dfn> (HyperText Markup Language) is used to structure web content.</p>

<p>Later in the document, we can reference <a href="#def-html">HTML</a> again.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>A <dfn id="def-html">HTML</dfn> (HyperText Markup Language) is used to structure web content.</p>

<p>Later in the document, we can reference <a href="#def-html">HTML</a> again.</p>

Definition Patterns

Pattern 1: Term with Explanation

<p>The <dfn>viewport</dfn> is the user's visible area of a web page.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The <dfn>viewport</dfn> is the user's visible area of a web page.</p>

Pattern 2: Term with Parenthetical Definition

<p>We use <dfn>AJAX</dfn> (Asynchronous JavaScript and XML) to update content without reloading the page.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>We use <dfn>AJAX</dfn> (Asynchronous JavaScript and XML) to update content without reloading the page.</p>

Pattern 3: Definition in Description List

<dl>
<dt><dfn>Semantic HTML</dfn></dt>
<dd>HTML that conveys meaning about its content, not just presentation.</dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<dl>
<dt><dfn>Semantic HTML</dfn></dt>
<dd>HTML that conveys meaning about its content, not just presentation.</dd>
</dl>

Pattern 4: Term with Title Attribute

<p>The <dfn title="First Contentful Paint">FCP</dfn> metric measures loading performance.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The <dfn title="First Contentful Paint">FCP</dfn> metric measures loading performance.</p>

Determining What Term is Being Defined

The browser determines the term being defined in this order:

The title attribute on <dfn> itself
The title attribute on an <abbr> inside <dfn>
The text content of the <dfn> element

<!-- Priority 1: dfn title -->
<p><dfn title="Cascading Style Sheets">CSS</dfn></p>

<!-- Priority 2: abbr title inside dfn -->
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></p>

<!-- Priority 3: text content -->
<p><dfn>JavaScript</dfn></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Priority 1: dfn title -->
<p><dfn title="Cascading Style Sheets">CSS</dfn></p>

<!-- Priority 2: abbr title inside dfn -->
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></p>

<!-- Priority 3: text content -->
<p><dfn>JavaScript</dfn></p>

Styling

Customize the appearance of definitions:

<style>
dfn {
  font-style: normal;
  font-weight: 600;
  color: #0066cc;
  border-bottom: 2px dotted #0066cc;
}
dfn:hover {
  background: #f0f8ff;
}
</style>

<p>A <dfn>framework</dfn> is a platform for developing software applications.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
dfn {
  font-style: normal;
  font-weight: 600;
  color: #0066cc;
  border-bottom: 2px dotted #0066cc;
}
dfn:hover {
  background: #f0f8ff;
}
</style>

<p>A <dfn>framework</dfn> is a platform for developing software applications.</p>

Only Mark First Instance

Mark only the defining instance, not subsequent uses:

Correct
Wrong

<p>A <dfn>variable</dfn> is a container for storing data.</p>
<p>You can change a variable's value at any time.</p>

<p>A <dfn>variable</dfn> is a container for storing data.</p>
<p>You can change a <dfn>variable's</dfn> value at any time.</p>

Accessibility

Screen readers typically read <dfn> as regular text, but the semantic meaning helps structure the content.

Provide Context

Make sure the definition is clear:

Unclear
Clear

<p><dfn>Cache</dfn> stores data.</p>

<p>A <dfn>cache</dfn> is temporary storage that saves frequently accessed data for faster retrieval.</p>

Combine with ARIA

For enhanced accessibility in glossaries:

<dl role="list">
  <div role="listitem">
    <dt><dfn id="term-api">API</dfn></dt>
    <dd>Application Programming Interface</dd>
  </div>
</dl>

Real-World Examples

Tutorial Content

<article>
<h2>Understanding Functions</h2>
<p>A <dfn>function</dfn> is a reusable block of code that performs a specific task. Functions help organize code and avoid repetition.</p>
<p>To create a function, use the function keyword...</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h2>Understanding Functions</h2>
<p>A <dfn>function</dfn> is a reusable block of code that performs a specific task. Functions help organize code and avoid repetition.</p>
<p>To create a function, use the function keyword...</p>
</article>

Documentation

<section>
<h3>Key Concepts</h3>
<p><dfn>Asynchronous programming</dfn> allows operations to run independently without blocking other code execution.</p>
</section>

Result

Interactive code playground requires JavaScript. Here's the code:

<section>
<h3>Key Concepts</h3>
<p><dfn>Asynchronous programming</dfn> allows operations to run independently without blocking other code execution.</p>
</section>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <dfn> element has been supported since the earliest browsers.

For abbreviations and acronyms. Learn more →

Description lists for terms and definitions. Learn more →

Definition term in description lists. Learn more →

<dfn> - The Definition Element

The <dfn> Element

Quick Example

Syntax

Common Use Cases

Basic Definitions

Technical Terms

With Abbreviations

In Glossaries

With Title Attribute

Multiple Word Terms

Scientific Terms

With ID for References

Definition Patterns

Pattern 1: Term with Explanation

Pattern 2: Term with Parenthetical Definition

Pattern 3: Definition in Description List

Pattern 4: Term with Title Attribute

Determining What Term is Being Defined

Styling

Only Mark First Instance

Accessibility

Screen Reader Behavior

Provide Context

Combine with ARIA

Real-World Examples

Tutorial Content

Documentation

Browser Support

Related Elements

Specifications

The `<dfn>` Element