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
dfnelement between the<dfn>start tag without atitleattribute and the</dfn>end tag - the
titleattribute of the<dfn>tag - the
titleattribute of an<abbr>tag that is the sole content (no other tags or text nodes) of thedfnelement
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.