If you find this helpful, please click the Google 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.) |
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 atitle
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 thedfn
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><dl> tag</dfn></dt> <dd>Definition: The <dl> 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><dt> tag</dfn></dt> <dd>Definition: The <dt> tag is used to code a description term in a description list, leading into one or more detail description elements.</dd> <dt>Term: <dfn><dd> tag</dfn></dt> <dd>Definition: The <dd> 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.