The <dfn> Element
As defined in the HTML Living Standard, the <dfn> element represents the defining instance of a term. The term being defined is the content of the element.
An accessibility audit is a comprehensive review of a digital product to ensure it meets standard inclusivity requirements.
<p>
The <dfn>Internet</dfn> is a global system of interconnected computer networks.
</p>
View HTML Living Standard: The dfn element
Term Identification Rules
The browser determines the term being defined using a specific priority order:
- The
titleattribute: If present, the value of thetitleattribute is the term. - The
abbrelement: If the<dfn>contains exactly one child element and it is an<abbr>with atitle, the value of thattitleis the term. - Text Content: Otherwise, the text content of the
<dfn>element is the term.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Using <dfn> programmatically links the term to its context. For screen reader users, this provides essential semantic metadata that distinguishes a keyword from surrounding prose. When coupled with an id, you can link back to this defining instance from anywhere in the document using an <a> tag, creating a robust navigation system for technical documentation.
Defining vs. Usage
The <dfn> element should only be used once for a given term within a document or section—at the point where the term is actually being defined. For all other mentions of the term, use standard text or a link back to the definition.
<!-- Defining Instance -->
<p>The <dfn id="css-def">CSS</dfn> is a language used for styling HTML.</p>
<!-- Usage Instance -->
<p>When writing <a href="#css-def">CSS</a>, follow SMACSS principles.</p>