The <dfn> (short for definition) tag is used to mark the defining instance of a term within your content. It’s a semantic tag that helps both readers and search engines understand where a term is being defined for the first time.
✅ Basic Syntax
<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>
📍 Result:
Browsers typically italicize the text inside <dfn> by default.
🧠 Semantic Use Case
The <dfn> tag is not just for styling — it’s meant to indicate that this is the moment a term is being introduced or explained.
You could also add the title attribute to improve accessibility:
<p><dfn title="HyperText Markup Language">HTML</dfn> is used to structure web content.</p>
Screen readers and tooltips can then show the expanded title.
🎨 Styling Example
You can use CSS to customize how definitions appear:
<style>
dfn {
font-style: italic;
color: #2a7ae2;
cursor: help;
}
</style>
📚 Example in Context
<p>
In computer science, a <dfn>stack</dfn> is a linear data structure which follows the LIFO principle.
</p>
This makes it clear that “stack” is being defined for the first time.
✅ Summary
| Tag | <dfn> |
|---|---|
| Purpose | Marks the defining instance of a term |
| Default Style | Italic |
| Use Case | Glossaries, documentation, textbooks |
| Optional Attribute | title for extra info |
🚫 What Not to Do
- Don’t use
<dfn>every time you mention a word — only when you are introducing and defining it. - Avoid using it purely for italic text — use
<em>or CSS for that instead.