Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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
Glossary integration
Vanilla Breeze ships a generated glossary backed by a single SKOS vocabulary file (site/src/_data/vocabulary.json). Every entry on that page renders as <dt id="term-{id}"><dfn>label</dfn></dt> — the <dfn> marks the canonical defining instance per HTML5.
When you mention one of those concepts in article prose, link the first occurrence with the same data-concept attribute the build pipeline emits. Subsequent mentions on the same page use a plain anchor.
First (defining) mention in prose
<p>We use <dfn><a href="/glossary/#term-progressive-enhancement" data-concept="progressive-enhancement">progressive enhancement</a></dfn> to ensure content is available before scripts load.</p>Two things light up automatically:
- The link is valid with no JS —
hrefdeep-links to the term's anchor on the glossary page. - A small popover script (
/js/definition-popover.js) fetches/definitions.jsonon first interaction and shows the definition in a native popover anchored to the term. The script queriesa[data-concept], so the wrapping element doesn't matter —<dfn>is purely the HTML5-correct semantic for the first mention.
See Glossary terms in prose for the full authoring pattern, including subsequent-mention and abbreviated-mention forms.
Related
- Glossary — the canonical defining-instance corpus, generated from
vocabulary.json - Glossary terms in prose — first-mention / subsequent / abbreviated patterns
<abbr>— for abbreviations (often used inside<dfn>; also pairs with concept altLabels)<dl>— Definition lists for glossaries<dt>— Definition term (wraps<dfn>in glossary patterns)<a>— For linking back to definitions viaid<em>— For emphasis (not definitions)