Live Preview
A term marked with default italic styling:
HTML (HyperText Markup Language) is used to structure content on the web.
HTML <dfn> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll mark defining instances of terms semantically with <dfn> in real content.
dfn Syntax
Wrap the term being defined, not the full explanation.
Defining Instance
Mark where a term is formally explained in your document.
title Attribute
Name the full term when visible text is abbreviated.
id Cross-Links
Let other links jump to glossary definitions.
dfn vs abbr vs dt
Choose the right semantic tag for each use case.
CSS Styling
Customize defined-term appearance beyond default italics.
Fundamentals
What Is the <dfn> Tag?
The dfn element (<dfn>) represents the defining instance of a term. Wrap the term itself in dfn; the explanation usually appears in the same sentence or parent element. Browsers often display dfn in italics by default.
Wrap the term, not the definition
<dfn> marks where a word is defined. The definition text lives in the surrounding sentence—not inside the tag itself.
Common uses include introducing technical vocabulary in tutorials, marking glossary entries, defining acronyms at first use, and clarifying domain-specific terms in articles or documentation.
Foundation
📝 Syntax
Place the term inside dfn and write the definition nearby:
syntax.html
<p>
<dfn>HTML</dfn> (HyperText Markup Language) structures web page content.
</p>Syntax Rules
<dfn>is an inline element—it nests inside paragraphs and headings.- Wrap the term, not the full definition sentence.
- Use at the defining instance—typically the first formal explanation.
- Add
titlewhen the visible text is an abbreviation of the full term.
Cheat Sheet
⚡ Quick Reference
| Feature | Syntax / Rule | Notes |
|---|---|---|
| title | title="Full term" | When visible text differs |
| id | id="def-term" | Anchor for cross-links |
| Default style | Italic | font-style: italic |
| Wraps | The term | Not the definition text |
| vs abbr | Define vs abbreviate | dfn = defining instance |
| Use cases | Glossary, tutorials | Articles, specs, docs |
Comparison
⚖️ <dfn>, <abbr>, and <dt>
These tags all relate to terminology but carry different meanings:
| Tag | Meaning | When to use |
|---|---|---|
<dfn> | Defining instance | Inline term definition in flowing text |
<abbr> | Abbreviation | Short form with optional title expansion |
<dt> | Description list term | Term label inside dl lists |
| Best fit | Inline vs list | dfn in paragraphs; dt in glossaries |
Reference
🧰 Attributes
dfn has no required tag-specific attributes, but title and global attributes are useful:
title OptionalNames the full term when the visible text is abbreviated or shortened.
title="Cascading Style Sheets"id GlobalUnique anchor so other links can jump to this definition.
id="def-api"class GlobalCSS hook for custom defined-term styling.
class="term"lang GlobalLanguage of the defined term when it differs from the document.
lang="fr"title names the term when the visible text is abbreviated. id lets other links point to this defining instance.
Hands-On
Examples Gallery
Basic definitions, title for abbreviations, article concepts, and id cross-references with copy-ready code and live previews.
Basic Term Definition
Wrap the term and write the definition in the same sentence.
basic-dfn.html
<p>
<dfn>HTML</dfn> (HyperText Markup Language) is the standard language for structuring web pages.
</p>📚 Common Use Cases
Use <dfn> when introducing technical vocabulary in tutorials, marking glossary entries, defining acronyms at first use, and clarifying domain-specific terms in articles or documentation.
title for Abbreviated Terms
Use title when the visible text is a short form of the full term.
title-dfn.html
<p>
<dfn title="Cascading Style Sheets">CSS</dfn>
controls colors, layout, and typography on web pages.
</p>Defining a Concept in an Article
Mark a technical term at its first mention with a clear definition sentence.
defining-terms.html
<p>
<dfn>Responsive web design</dfn> is an approach where layouts adapt to different screen sizes using flexible grids, images, and media queries.
</p>id for Cross-References
Add an id so links can jump to the defining instance.
id-dfn.html
<p>See the <a href="#def-api">API</a> definition below.</p>
<p>
<dfn id="def-api">API</dfn>
(Application Programming Interface) lets software applications communicate.
</p>Design
Styling <dfn> with CSS
Browsers apply italic styling by default. Customize defined terms with color, weight, or background for clearer glossary markup:
font-style Default italiccolor Highlight defined termsfont-weight Emphasize glossary entriesbackground Subtle term highlight dfn-styles.css
/* Defined term styling */
dfn {
font-style: italic;
color: #1e40af;
}
dfn.term-highlight {
font-weight: 600;
background: #eff6ff;
padding: 0.1rem 0.25rem;
border-radius: 4px;
}Live styled defined term
Semantic HTML uses elements that convey meaning, not just appearance.
A11y
♿ Accessibility
Semantic definitions help readers understand specialized vocabulary:
- Define terms clearly — the surrounding text should explain the meaning.
- Use dfn at the defining instance — typically the first formal explanation.
- Do not rely on styling alone — italics without dfn lack semantic meaning.
- Link with id when helpful — lets users jump to glossary entries.
🧠 How <dfn> Works
1
Author marks the term
Wrap the word or phrase in dfn at its defining instance.
Markup
2
Definition appears nearby
The explanation lives in the same paragraph or parent element.
Context
3
Browser styles the term
Default italics signal a defined term; CSS can customize further.
Render
=
Clearer, semantic content
Readers and machines can identify where terms are formally defined.
Compatibility
Universal Browser Support
The <dfn> element is fully supported in all browsers, including legacy Internet Explorer.
Baseline · Since HTML 4
Defined terms that work everywhere
From legacy Internet Explorer to the latest mobile browsers — the dfn element is fully supported for semantic term definitions.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 6+ · Legacy environments
Full supportOpera All modern versions
Full support<dfn> tag 100% supported
Bottom line: Ship semantic term definitions with confidence. The <dfn> element is safe to use in every production environment today.
Wrap Up
Conclusion
The <dfn> tag marks where a term is defined in your content. Use it with clear surrounding definitions, add title for abbreviations, and use id for glossary cross-links—not just for visual highlighting.
Pro Tips
💡 Best Practices
✅ Do
- Wrap the term, not the definition
- Write a clear explanation nearby
- Use at the defining instance
- Add
idfor glossary links
❌ Don’t
- Use
dfnonly for bold or italic style - Mark terms without providing a definition
- Confuse
dfnwithabbrordt - Overuse it on every technical word
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <dfn>
Bookmark these before you ship — they’ll keep your definition markup semantic and accessible.
6
Core concepts 01
Defining Instance
<dfn> marks where a term is formally defined.
02
Wraps the Term
Not the full definition sentence.
Syntax 03
Default Italic
Browsers apply font-style: italic by default.
Render 04
title Attribute
Names the full term for abbreviated text.
Metadata 05
id Cross-Links
Enable glossary anchors and jump links.
Pattern 06
Not abbr or dt
Different tags for abbreviations and list terms.
Semantics❓ Frequently Asked Questions
It marks the term being defined in a document. The definition usually appears in the same paragraph or nearby content.
dfn marks where a term is formally defined. abbr marks an abbreviation and often uses title for the expansion.Wrap the term. The definition text follows in the surrounding sentence or parent element.
It specifies the full term when the visible text is an abbreviation or shortened form.
dt labels terms in a dl list structure. dfn defines terms inline within flowing text like paragraphs.Define Terms Semantically
Practice dfn, title, and glossary cross-links in the interactive HTML editor.
About the author
6 people found this page helpful