HTML <dfn> Definition Tag

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

The <dfn> Tag in HTML 5

The <dfn> tag encloses the defining instance of a term in HTML. The dfn element is one of the phrase elements in HTML. The defining instance is often the first use of the term, and is found in the same paragraph or list item along with the definition of the term.

The term that is being defined should be coded inside the <dfn> tag and can be any one of the following:

  • the content of the dfn element between the <dfn> start tag without a title attribute and the </dfn> end tag
  • the title attribute of the <dfn> tag
  • the title attribute of an <abbr> tag that is the sole content (no other tags or text nodes) of the dfn element
Definition List

Note that a description list (formerly known as a definition list) is not an alternative to the dfn element. To create a definition list, combine the dl element with the definition tag as in this example:

Term: <dl> tag
Definition: The <dl> tag is used to code a description list consisting of description terms alternating with groups of one or more detail descriptions.
Term: <dt> tag
Definition: The <dt> tag is used to code a description term in a description list, leading into one or more detail description elements.
Term: <dd> tag
Definition: The <dd> detail description tag is used to code the description of an item inside a dl element for a description list.

This is an actual working example of the <dfn> tag example code below. In most HTML 5 browsers such as Firefox and Opera, the text inside the dfn element will be in an italic font, except for WebKit browsers such as Chrome and Safari which display it in an upright font.

Incorrect use of the <dfn> tag and title attribute

Note that many HTML pages and even a significant number of examples on the web misuse the title attribute for the definition of the term when it is supposed to be the term that is being defined. For example, the following is incorrect:

A bad example <dfn title="For Those Wondering"><abbr>FTW</abbr></dfn>

The reason this is not correct is because "For Those Wondering" is the meaning of the acronym "FTW", rather than the term being defined. See the examples of the <abbr> tag for correct use of the <dfn> tag with the <abbr> tag.

Using the <dfn> tag to define an acronym or abbreviation

The value of the title attribute should be the term that is being defined. When there is an acronym or abbreviation involved, whether the acronym or its expansion appears in the title tag depends on whether it's the abbreviated form or its expanded meaning that is being defined.

When an abbreviation is a short form of the actual term that is being defined, the title attribute should not be the acronym or abbreviation that stands for the subject of the definition but rather its fully expanded meaning. Since this is the same purpose that the title attribute of the <abbr> tag serves, the title can simply be coded there:

<dfn><abbr title="Internet Corporation for Assigned Names and Numbers">ICANN</abbr></dfn>
is the international organization which helps ensure that
Internet domain names are assigned in an orderly manner.

When an acronym's meaning is being clarified by expanding it, then it is the acronym itself that is being defined and the title attribute of the parent <dfn> tag also needs to be coded to indicate it is not the expanded meaning in the <abbr> tag's title but the acronym or abbreviation itself that is being defined:

When we use the acronym
<dfn title="RSS"><abbr title="Really Simple Syndication">RSS</abbr></dfn>
it is the abbreviation for <b>Really Simple Syndication</b>, not RDF Site Summary.

<dfn> Tag Syntax

<body>
   ...
   ... phrasing content expected ...<dfn id="dfn-id">... phrasing content ...</dfn>...
   ...
</body>
Rules for coding HTML dfn elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

  • Code the dfn element where phrasing content is expected.
  • Begin the dfn element for a definition with a starting <dfn> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  • Optionally code an id attribute to allow referring back to the defining instance of the term.
  • Unless the content of the <dfn> tag is a simple text node with the exact term being defined, include a title attribute on the <dfn> tag with the term being defined (see the second example of the <dfn> tag where the term being defined is "blog" but the text content of the <dfn> tag is "blog or weblog").
  • Include the term being defined as the content within the tags.
  • End the dfn element with a matching </dfn> closing tag.
  • Include the definition of the term in the same paragraph or list item outside the <dfn> tag.

<dfn> Tag Attributes

Attributes of the <dfn> tag
global attributes In addition to the personal attributes of the <dfn> tag below, any of the common HTML attributes can also be coded.
id Including an id attribute allows additional uses of the same term to refer back to the defining instance of the term, without having to include the definition again.
title The title attribute identifies the term that is being defined. Do not use the title tag for the definition of the term or for the expanded meaning of an acronym or abbreviation when it is simply being expanded in the text that follows.
Unlike the common attribute of the same name, the title attribute of the <dfn> tag does not inherit its value from an ancestor tag. However, the title attribute of a child <abbr> tag will be used, which is appropriate when the term being defined is the expanded meaning of an acronym or abbreviation rather than the abbreviation itself.

<dfn> Tag Examples

Examples of the dfn tag in HTML 5
Simple inline definition

In the following example, the term being defined is the content of the <dfn> tag. Whenever a term is used it can refer back to the definition using an <a> tag:

<p><dfn id="definition-of-love">Love</dfn> is a strong passionate feeling
for another person. I <a href="#definition-of-love">love</a> you.</p>

The value of the <a href> attribute starts with a hash symbol (#) indicating that it is a fragment identifier pointing to another location in the same page.

An example where the term being defined is specified in the title attribute:

A <dfn id="blog-dfn" title="blog">blog or weblog</dfn> is an online journal.

Examples where the term being defined is an acronym or its meaning

<p>An <dfn id="acronym-dictionary" title="acronym dictionary">
   <a href="http://www.Acronyms.net/dictionary.html">acronym dictionary</a></dfn>
   provides a list of possible definitions of an acronym.
   An <dfn id="acronym-finder" title="acronym finder">
   <a href="http://www.Acronyms.net/finder.html">acronym finder</a></dfn>
   is the opposite of an <a href="#acronym-dictionary">acronym dictionary</a> and
   does just what it's name says - it helps find the acronym that can be used as
   the abbreviation for a given term based on keywords in the acronym definition.
</p>

An acronym dictionary provides a list of possible definitions of an acronym. An acronym finder is the opposite of an acronym dictionary and does just what it's name says - it helps find the acronym that can be used as the abbreviation for a given term based on keywords in the acronym definition.

Definition list with dl element and dfn elements
(see definition list demo above)
<dl>
   <dt>Term: <dfn>&lt;dl&gt; tag</dfn></dt>
   <dd>Definition: The &lt;dl&gt; tag is used to code a description list consisting
   of description terms alternating with groups of one or more detail descriptions.</dd>
   <dt>Term: <dfn>&lt;dt&gt; tag</dfn></dt>
   <dd>Definition: The &lt;dt&gt; tag is used to code a description term
   in a description list, leading into one or more detail description elements.</dd>
   <dt>Term:  <dfn>&lt;dd&gt; tag</dfn></dt>
   <dd>Definition: The &lt;dd&gt; detail description tag is used to code the
   description of an item inside a <b>dl</b> element for a description list.</dd>
</dl>

Changes in HTML 5 - <dfn> Tag

What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the dfn element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.


Valid HTML 5