<dfn>

Specifies a term that is going to be defined within the content

Quick Answer

What is the HTML <dfn> tag?

The <dfn> tag marks the defining instance of a term being explained. It typically appears in italic font and should be used when first introducing a term with its definition. The nearest <p>, <section>, or <dl> ancestor is considered the definition's description, improving semantic clarity for glossaries and technical documentation.

Definition and Usage

The <dfn> tag represents the defining instance of a term in HTML. It indicates that the enclosed text is the term being defined in the current context.

The nearest parent of the <dfn> tag must contain the definition/explanation for the term. This is typically a paragraph, description list, or section.

Tip: Use the <dfn> tag for creating glossaries, technical documentation, and educational content where terms need to be clearly defined.

Tip: The title attribute on <dfn> can be used to specify the term being defined, especially when the term itself isn't in the content.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The <dfn> tag also supports the Global Attributes in HTML.

The most commonly used attribute with <dfn> is:

Attribute	Value	Description
title	text	Specifies the term being defined. This is useful when the term appears in a different form than how it's being defined.

Examples

Basic Definition

Define a term within a paragraph:

Example
<p>
  <dfn>HTML</dfn> is the standard markup language for creating web pages.
</p>

With Title Attribute

Specify the term being defined using the title attribute:

Example
<p
  >
  <dfn title="HyperText Markup Language"
    >HTML</dfn
  > is used to structure content on the web.
</p
>

With Abbreviation

Combine <dfn> with <abbr> for abbreviated terms:

Example
<p>
  <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>
  is a stylesheet language used to describe the presentation of HTML documents.
</p>

In Definition List

Use <dfn> within definition lists:

Example
<dl
  >
  <dt><dfn>API</dfn></dt
  >
  <dd>Application Programming Interface - a set of protocols and tools for building software applications.</dd>

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

  <dt
    ><dfn>AJAX</dfn></dt
  >
  <dd>Asynchronous JavaScript and XML - a technique for creating dynamic web pages.</dd>
</dl
>

Glossary Entries

Create a glossary of terms:

Example
<section
  >
  <h2>Web Development Glossary</h2>

  <article
    >
    <h3
      ><dfn id="responsive-design">Responsive Design</dfn></h3
    >
    <p>An approach to web design that makes web pages render well on different devices and screen sizes.</p>
  </article
  >

  <article
    >
    <h3><dfn id="seo">SEO</dfn></h3
    >
    <p>Search Engine Optimization - the practice of optimizing websites to rank higher in search engine results.</p>
  </article
  >
</section
>

Technical Terms

Define technical terminology in documentation:

Example
<article
  >
  <h2>Understanding Web Protocols</h2>

  <p>
    <dfn>HTTP</dfn> (HyperText Transfer Protocol) is the foundation of data
    communication on the web. It defines how messages are formatted and transmitted.
  </p>

  <p>
    <dfn>HTTPS</dfn> is the secure version of HTTP, using encryption to protect
    data during transmission between client and server.
  </p>

  <p
    >
    <dfn title="File Transfer Protocol"
      >FTP</dfn
    > is used for transferring files
    between computers on a network.
  </p
  >
</article
>

<dfn> vs <abbr> vs <cite>

Understanding the differences between these semantic tags:

Tag	Purpose	Use Case	Example
<dfn>	Defines a term being explained	Glossaries, definitions, terminology	<dfn>Semantics</dfn> refers to meaning
<abbr>	Marks abbreviations/acronyms	Shortened forms with full expansion	<abbr title="World Health Organization">WHO</abbr>
<cite>	References creative works	Book titles, articles, movies	<cite>The Great Gatsby</cite>

Semantic HTML for Definitions

Best practices for marking up definitions semantically:

Example
<!-- Good: Clear definition structure -->
<section
  >
  <h3>Key Concepts</h3>

  <p
    >
    <dfn id="semantic-html">Semantic HTML</dfn
    > refers to the use of HTML tags
    that convey meaning about the content they contain, not just how it should look.
  </p
  >

  <p
    >
    Later in the document, you can reference
    <a href="#semantic-html">semantic HTML</a
    > without redefining it.
  </p
  >
</section
>

<!-- Better: With additional context -->
<article
  >
  <h3><dfn>Progressive Enhancement</dfn></h3
  >
  <p>
    A strategy for web design that emphasizes core webpage content first,
    then progressively adds technical and design layers as user capabilities allow.
  </p>
  <ul>
    <li>Start with basic HTML structure</li>
    <li>Add CSS for visual presentation</li>
    <li>Enhance with JavaScript for interactivity</li>
  </ul>
</article
>

Accessibility and SEO Benefits

Screen Readers: The <dfn> tag helps screen readers identify when a term is being defined
Search Engines: Search engines can identify key terminology and definitions on your page
Content Structure: Improves the semantic structure of educational and documentation content
Knowledge Graphs: Helps search engines build knowledge graphs from your content
Featured Snippets: Well-structured definitions may appear in search engine featured snippets
User Experience: Makes it easier for users to find and understand key concepts
Machine Readability: Improves how automated systems parse and understand your content

Styling Definition Terms

Customize the appearance of defined terms with CSS:

Example

Approved-page light CSS-variable defaults are supplied: --accent-primary. The snippet includes CSS inside its HTML.

<style>
  dfn {
    font-style: italic;
    font-weight: 600;
    color: var(--accent-primary);
    border-bottom: 2px dotted var(--accent-primary);
    cursor: help;
  }

  dfn:hover {
    border-bottom-style: solid;
    background-color: rgba(116, 90, 242, 0.1);
  }

  /* For glossary entries */
  dfn.glossary-term {
    font-size: 1.2em;
    font-style: normal;
    color: #2c3e50;
  }

  /* For inline definitions */
  dfn.inline {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
  }
</style>

<p>The <dfn>callback function</dfn> is a function passed as an argument to another function.</p>

<h3><dfn class="glossary-term">Closure</dfn></h3>
<p>A closure gives you access to an outer function's scope from an inner function.</p>

Try it Yourself

Interactive Example

See how defined terms are styled and presented:

JavaScript is a programming language that enables interactive web pages.

API (Application Programming Interface) allows different software systems to communicate.

Responsive Design ensures websites work well on all device sizes.

Try in Code Playground

Best Practices

Use <dfn> only for the first/defining instance of a term on a page
Ensure the definition or explanation is in the nearest parent element
Add an id attribute to create linkable definitions in glossaries
Use the title attribute when the term's expansion differs from display text
Combine with <abbr> for abbreviated terms that are being defined
Style defined terms consistently to make them visually distinct
Consider adding hover effects or tooltips for additional context
Don't use <dfn> just for styling - use it only when semantically appropriate

Related Tags

<abbr>
Defines an abbreviation or acronym
<cite>
Defines the title of a work
<dl>
Defines a description list