HTML <dfn> Tag - Highlighting Definitions in Web Pages

The HTML Definition element represented by <dfn> is the standard markup used to highlight terms being defined in webpages.

<p>A <dfn>synonym</dfn> is a word having almost the same meaning as a different word.</p>

Using standard markup elements bring a sense meaning to the page, especially for automated machines like web crawlers. A web crawler can read a <dfn> tag and get to know that there is term being defined. This term and its definition can be used by the crawler for specific purposes.

Note that <dfn> tag holds the term being defined, and not the definition. The associated definition needs to be defined nearby to have a meaning for the <dfn> element.

Identifying the Term Being Defined

Following rules are used to identify the term being defined:

• If the attribute title is present in the <dfn> element, its value is considered to be the term being defined. The text must be present within the element though.

  <!-- "CSS" is the defined term -->
  <p>A <dfn title="CSS">CSS</dfn> stands for Cascading Style Sheets.</p>
  

• If <dfn> contains no inner text and <abbr> element is the only child element in it, then the title attribute of the <abbr> element is considered the term being defined (if title attribute present).

  <!-- "PHP" is the defined term -->
  <p><dfn><abbr title="PHP"></abbr></dfn> stands for Hypertext Preprocessor.</p>
  

• In rest of the cases the text content of <dfn> is considered to be the term being defined.

  <!-- "CSS" is the defined term -->
  <p><dfn>CSS</dfn> stands for Cascading Style Sheets.</p>
  

Identifying the Complete Definition of the Term

The complete definition for the term represented by <dfn> can be found in the nearest parent <p> or <section> or <dt> / <dd> pair.

<!-- "CSS" is the defined term -->
<!-- "CSS stands for Cascading Style Sheets." is the definition -->
<p><dfn>CSS</dfn> stands for Cascading Style Sheets.</p>