HTML <dfn> Tag
Concept
The <dfn> tag in HTML is used to mark up a term that’s being defined within the context of a definition expression. It’s a way to highlight the defining instance of a term. The nearest parent element of the <dfn> tag that has a title attribute explains the term. The content inside the <dfn> tag is typically rendered in italic by browsers.
Implementation
Example 1: Marking Up a Term with <dfn>
Here’s an example of how you can use the <dfn> tag to mark up a term:
<dfn>HTML</dfn> is a standard markup language for documents designed to be displayed in a web browser.
Â
Example 2: Using the Title Attribute with <dfn>
You can also use the title attribute with the <dfn> tag to provide a definition:
<dfn title="HyperText Markup Language">HTML</dfn> is used to structure content on the web.
Example 3: Using an <abbr> Tag Inside the <dfn> Element
You can include an <abbr> tag inside the <dfn> element to define an abbreviation:
<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is a stylesheet language used for describing the look and formatting of a document written in HTML.
Try it out below:
Attributes
Global Attributes
The <dfn> tag supports all the global attributes in HTML.
Event Attributes
The <dfn> tag also supports all the event attributes in HTML.
Browser Support
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
| IE | Yes |
Default CSS Settings
Most browsers will display the <dfn> element with the following default CSS settings:
dfn {
font-style: italic;
}
Conclusion
The <dfn> tag provides a semantic way to highlight the defining instance of a term within a definition expression.
It’s useful for authors, educators, and content creators who want to emphasize specific terms and their definitions.