HTML: <dfn> tag
In this series of learning HTML, we will teach you how to use HTML <dfn> tag with proper syntax and lots of examples. Let’s start on the HTML dfn tag.
Description of HTML dfn tag
We use HTML <dfn> tag to mark the term defined in the content. The full form of dfn is the “definition element.” Anything you want to show as a defining element, add inside <dfn> as shown in the HTML code below. Browsers render all the text inside the HTML <dfn> tag as italicized text.
Syntax HTML dfn tag
Example 1 of HTML dfn tag, when you want to add some of the content inside <dfn>tag:
<body>
<p>Hello from <dfn>Home4Cloud.</dfn> Learn how to use HTML dfn tag.</p>
</body>
Sample Output
Hello from Home4Cloud. Learn how to use HTML dfn tag.
Example 2 of HTML dfn tag, when you add content with the title attribute.
<body>
<p>Hello from <dfn title="welcome to Home4Cloud dfn tag">Home4Cloud.</dfn> Learn how to use HTML dfn tag.</p>
</body>Sample Output
Hello from Home4Cloud. Learn how to use HTML dfn tag.
Example 3 of HTML dfn tag, when you add content inside <dfn> tag with <abbr> tag.
<body>
<p>Hello from <dfn> <abbr title="welcome to Home4Cloud dfn tag"> Home4Cloud.</abbr></dfn> Learn how to use HTML dfn tag.</p>
</body>
Sample Output
Hello from Home4Cloud. Learn how to use HTML dfn tag.
Example 4 of HTML dfn tag, when you add content inside <dfn> tag with id attribute added. So whenever the term is used, you can refer it back to the definition with a <a> tag as shown in the example below.
<body>
<p>Hello from <dfn id="html-def">Welcome to Home4Cloud </dfn> Learn how to use HTML dfn tag.</p>
<p>Anything you can add there.....</p>
<p>Anything you can add there.....</p>
<p>Anything you can add there.....</p>
<p>Learn <a href="#html-def">Welcome to Home4Cloud </a>.</p>
</body>Sample Output
Hello from Welcome to Home4Cloud Learn how to use HTML dfn tag. Anything you can add there..... Anything you can add there..... Anything you can add there..... Learn Welcome to Home4Cloud .
Global Attributes
HTML dfn tag is a part of Global Attributes.
Event Attributes
HTML dfn tag is a part of Event Attributes.
Note
- You can find all HTML dfn tag elements inside the body tag only.
- Browsers can format the text in italics format, which are inside the HTML dfn tag, but you can change this behavior with CSS.
Browser Compatibility
The HTML dfn tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Example
We will discuss the HTML dfn tag below, with some examples of how to use the dfn tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.
HTML 4.01 Transitional Sample for <dfn> tag
If you created a new HTML webpage in HTML 4.01, your HTML dfn tag might look like this, as shown below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.home4cloud.com</title>
</head>
<body>
<h2>Heading 2</h2>
<p><dfn>Home4cloud: </dfn> Learn how to use HTML dfn tag.</p>
</body>
</html>In the above HTML 4.01 Document sample, we have created HTML dfn tags that identify the term.”Home4Cloud:” which is defined within the paragraph tag.
XHTML 1.0 Transitional Sample for <dfn> tag
If you created a new HTML web page in XHTML 1.0, your HTML dfn tag might look like this as shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.home4cloud.com</title>
</head>
<body>
<h2>Heading 2</h2>
<p><dfn>Home4cloud: </dfn> Learn how to use HTML dfn tag.</p>
</body>
</html>In the above XHTML 1.0 Transitional Document sample, we have created HTML dfn tags that identify the term “Home4Cloud:” which is defined within the paragraph tag.
XHTML 1.0 Strict Sample for <dfn> tag
If you created a new web page in XHTML 1.0 Strict, your HTML dfn tag might look like this as shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.home4cloud.com</title>
</head>
<body>
<h2>Heading 2</h2>
<p><dfn>Home4cloud: </dfn> Learn how to use HTML dfn tag.</p>
</body>
</html>In the above XHTML 1.0 Strict Document sample, we have created HTML dfn tags that identify the term.”Home4Cloud:” which is defined within the paragraph tag.
XHTML 1.1 Sample for <dfn> tag
If you created a new web page in XHTML 1.1, your HTML dfn tag might look like this as shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.home4cloud.com</title>
</head>
<body>
<h1>Heading 1</h1>
<p><dfn>HTML</dfn> is the technology used to create web pages.</p>
</body>
</html>In the above XHTML 1.1 Document sample, we have created HTML dfn tags that identify the term.”Home4Cloud:” which is defined within the paragraph tag.