HTML - <dfn> Tag

HTML <dfn> tag stands for "definition". The <dfn> tag is used to indicate the term being defined within the context of a definition phrase or sentence.

If a term is contained within the <dfn> element, then the browser understands that the text is the definition of the term. This <dfn> tag takes the title attribute, which specifies the definition of the term, and it shows when the mouse hovers over it.

Rules to use HTML dfn Tag

  • If the <dfn> contains a single child element and does not have any text content of its own, then add an <abbr> tag inside the <dfn> tag.
  • Alternatively, with the id attribute added. Then, whenever a term is used, an <a> tag can be used to refer back to the definition.

Syntax

<dfn title=".."> .... </dfn>

Attribute

HTML dfn tag supports Global and Event attributes of HTML.

Examples of HTML dfn Tag

In the bellow examples we will see the different examples of dfn elements. Each examples will illustarte the use cases of html dfn tag.

Specifying dfn element

In the following example, we are creating an HTML document and using the <dfn> tag without title attributes:

<!DOCTYPE html>
<html>
<body>
   <p>
      <dfn>tutorialspoint</dfn> is the EdTech company
      that provides good courses and technical tutorials for every 
      technologies.
   </p>
</body>
</html>

Specifying dfn element with title Attribute

Considering the following example, we are creating an HTML document and using the <dfn> tag with title attributes.

<!DOCTYPE html>
<html>
<body>
   <p>
      <dfn title="ReactJS">ReactJS</dfn> is the 
      library of the JavaScript language!.
   </p>
</body>
</html>

Specifying dfn element with abbr Tag

Let's look at the following example, we are creating an HTML document and using <abbr> tag inside the <dfn> tag.

<!DOCTYPE html>
<html>
<body>
   <p>
      <dfn>
      <abbr title="Hypertext Markup Language">HTML</abbr>
      </dfn> is the standard markup language for creating web pages.
   </p>
</body>
</html>

Specifying dfn element with id Attribute

Following is the example, where we are going to add the id attribute of the <dfn> tag so that whenever a word is used, it may be linked to the definition using an <a> tag.

<!DOCTYPE html>
<html>
<body>
   <p>
      <dfn id="definition-dfn">HTML Definition element</dfn> 
      is used to indicate the term being defined within the 
      context of a definition phrase or sentence.
   </p>
   <p>
      Because of all of that, we decided to use the 
      <a href="#definition-dfn">HTML dfn tag</a> 
   </p>
</body>
</html>

Supported Browsers

Tag Chrome Edge Firefox Safari Opera
dfn Yes Yes Yes Yes Yes
html_tags_reference.htm
Advertisements