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 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
Examples
Basic definition
<p> <dfn>Progressive Enhancement</dfn> is a web design strategy that starts with functional content and adds enhanced features for capable browsers.</p>
With abbreviation
<p> <dfn><abbr title="Application Programming Interface">API</abbr></dfn> is a set of protocols and tools for building software.</p>
With ID for linking
<p> <dfn id="dfn-viewport">Viewport</dfn> is the visible area of a web page in the browser window.</p> <!-- Later in the document --><p>...link back to the <a href="#dfn-viewport">viewport</a> definition.</p>
In a definition list
<dl> <dt><dfn>Block Element</dfn></dt> <dd>An element that starts on a new line and takes up the full width.</dd> <dt><dfn>Inline Element</dfn></dt> <dd>An element that does not start on a new line.</dd></dl>
Title Attribute
When the content of <dfn> differs from the term being defined (e.g., an abbreviation), use title to specify the full term:
dfn with title
<p>The <dfn title="Document Object Model">DOM</dfn> represents the page as a tree of nodes.</p>
CSS Reference
dfn CSS
dfn { font-style: italic; font-weight: 500;}
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
idenables linking from other occurrences back to the definition - Search engines can use
<dfn>to extract term-definition pairs