← Back to All Tags

<dfn>

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

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

The <dfn> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

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

<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.

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