dfn

Description

The <dfn> element identifies the defining instance of a term. The paragraph, definition list group, or section containing the <dfn> should also contain the definition. Styled with italic and semi-bold (font-weight: 500) to distinguish it from regular italic text like <em> or <i>.

When to Use

• First use of technical terms: Define jargon when introduced
• Glossary entries: Mark terms in a glossary (inside <dt>)
• Educational content: Introduce new vocabulary or concepts
• Documentation: Define product-specific terminology

When NOT to Use

• For emphasis — use <em> or <strong>
• For repeated uses of the term — only mark the defining instance
• For abbreviations alone — use <abbr> (but wrap <abbr> inside <dfn> when first defining it)

Examples

Title Attribute

When the content of <dfn> differs from the term being defined (e.g., an abbreviation), use title to specify the full term:

CSS Reference

The semi-bold weight (500) distinguishes <dfn> from <em> (which is just italic) and <i> (also just italic).

Accessibility

• Some screen readers announce defined terms, helping users identify definitions
• The surrounding paragraph should contain the actual definition
• Adding an id enables linking from other occurrences back to the definition
• Search engines can use <dfn> to extract term-definition pairs

Related

• <abbr> — For abbreviations (often used inside <dfn>)
• <dl> — Definition lists for glossaries
• <dt> — Definition term (wraps <dfn> in glossary patterns)
• <a> — For linking back to definitions via id
• <em> — For emphasis (not definitions)