dfn tag in html with examples

Home » HTML » HTML Tags » dfn tag in html with examples

dfn tag in html with examples

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The HTML <dfn> tag is used for indicating a definition. The <dfn> tag surrounds the word/term being defined.
The closing tag for the <dfn> Tag is required.
This element takes the width of the text. The <dfn> tag is supported in all major browsers.

Example :

     <html>
     <head>
     <title>DFN</title>
     </head>
     <body>
     <p>This is text without code effect.</p>
     <dfn>This is text with dfn effect.</dfn>
     </body>
     </html>

Demo :

In the above example, we have rendered dfn element. The dfn element is rendered in italic style by default.

dfn and Style :

<html>
<head>
<title>DFNStyle</title>
<style type="text/css">
dfn
{
font-family:comic sans ms;
color:green;
}
</style>
</head>
<body>
<p>This is text without code effect.</p>
<dfn>This is text with dfn effect.</dfn>
</body>
</html>

Demo :

In the above example, we have rendered dfn tag. We have applied CSS to dfn element using element selector in CSS.

dfn and Javascript :

<html>
<head><title>DFNJavascript</title>
<script type="text/javascript">
function dfn()
{
var element=document.createElement("dfn");
var text=document.createTextNode("This is dfn effect.");
element.appendChild(text);
document.getElementById("dfn").appendChild(element);
}
</script>
</head>
<body>
<div id="dfn">
</div>
<input type="button" id="b1" value="Press" onclick="dfn()">
</body>
</html>

Demo :

In the above example, we have created a button. On click of button, we are creating and rendering a dfn element using javascript.