Use-Cases of this Tutorial
- Know the correct tag for specifying definitions in HTML pages
- Know about the HTML Definition element <dfn>
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>