dfn

The dfn element indicates the defining instance of a term, marking where a term is first introduced and defined in the document.

Description

The <dfn> element identifies the defining instance of a term. The paragraph, definition list group, or section that contains the <dfn> element should also contain the definition for the term. This element is essential for glossaries, technical documentation, and educational content.

Semantic Meaning

The definition element provides important semantic information:

  • Marks the first, defining use of a term in a document
  • Search engines can use it to understand term definitions
  • Screen readers may announce it as a definition
  • Enables linking from other occurrences of the term back to its definition

When to Use

  • First use of technical terms: Define jargon when introduced
  • Glossary entries: Mark terms in a glossary or dictionary
  • Educational content: Introduce new vocabulary or concepts
  • Documentation: Define product-specific terminology
  • Legal documents: Define terms with specific legal meanings

When NOT to Use

  • Emphasis: Use <em> or <strong> instead
  • Repeated uses: Only mark the defining instance, not every use

Variants

Default

Displays in italic with slightly heavier weight to distinguish the defined term.

Progressive Enhancement is a web design strategy that starts with a baseline of functional content and adds enhanced features for capable browsers.

<dfn>Progressive Enhancement</dfn> is a web design strategy...

Live Examples

Simple Definition

A semantic element is an HTML element that clearly describes its meaning to both the browser and the developer.

With Abbreviation

Combine with <abbr> when defining an abbreviation.

API is a set of protocols and tools for building software applications.

<dfn><abbr title="Application Programming Interface">API</abbr></dfn>

With ID for Linking

Add an id attribute to enable linking from other parts of the document.

Viewport is the visible area of a web page in the browser window.

Later in the document, you can link back to the viewport definition.

<dfn id="dfn-viewport">Viewport</dfn> is the visible area... <!-- Later in document --> ...link back to the <a href="#dfn-viewport">viewport</a> definition.

In a Definition List

Block Element
An element that starts on a new line and takes up the full width available.
Inline Element
An element that does not start on a new line and only takes up necessary width.

With Title Attribute

The title attribute can provide the term being defined if the content differs.

The DOM represents the page as a tree of nodes.

<dfn title="Document Object Model">DOM</dfn>

Technical Documentation

In CSS, a custom property (also known as a CSS variable) is an entity defined by CSS authors that contains a specific value to be reused throughout a document.

A selector is a pattern that matches elements in a document tree.

CSS Properties

Property Value
font-style italic
font-weight 500

Accessibility

  • Screen reader support: Some screen readers announce defined terms, helping users identify definitions
  • Visual styling: Italic and semi-bold helps sighted users identify defined terms
  • Navigation: Using id attributes enables users to jump to definitions
  • Context is key: The surrounding paragraph should contain the actual definition

Related Elements

  • <abbr> - For abbreviations (often used inside dfn)
  • <dl>, <dt>, <dd> - Definition lists for glossaries
  • <a> - For linking back to definitions