HTML <dt> - More Than Just A Definition Term

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 <dt> Tag for a Description Term

Formerly the Definition Term element

The <dt> tag is used to code a description term in a description list, leading into one or more detail description elements. Note that in previous versions of HTML this element was called definition term, but since the purpose of the HTML 5 <dfn> tag is to code a definition, the <dt> tag by itself does not identify a term being defined. To define a list of terms, such as for a glossary, each term defined should be identified by putting it inside a dfn element as shown 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 <dt> 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.

<dt> Tag Syntax

Rules for coding HTML `dt` elements

<body>
   ... flow content expected ...
   <dl>
      ...
      <dt>... phrasing content ...</dt>
      <dd>
         ... flow content ...
      </dd>
      ...
   </dl>
   ...
</body>

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

Inside a dl element, code one or more dt elements.
Begin each dt element with a starting <dt> 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.
Include any HTML global attributes on the <dt> tag as appropriate.
Inside the dt element, between the <dt> starting tag and the </dt> ending tag, code the inner HTML phrasing content for the definition term.
When marking up a dt element with editing tags (<ins> or <del>), code the <ins> tag or <del> tag inside the <dt> tag.
End the dt element with a matching </dt> closing tag.

<dt> Content Model

Content of the dt element

The content of the dt element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

Validation Errors

If an element that is restricted for use in flow content is included in the inner HTML code of the dt element, the W3C Markup Validation Service will report an error like this:

Line line#, Column col#: HTML element element not allowed as child of HTML element dt in this context. Contexts in which element element may be used: Where flow content is expected. Content model for element dt: Phrasing content.

Other tools that validate HTML code may report a similar error. In electronic publishing, for example:

element "element" from namespace "http://www.w3.org/1999/xhtml" not allowed in this context

To resolve this type of error, remove the tag(s) in error from the inner HTML of the dt element, which is restricted to phrasing content, or move the element(s) into a dd element or outside of the definition list, to a location where flow content is allowed.

<dt> Tag Attributes

Attributes of the <dt> tag

global attributes

In addition to the personal attributes of the <dt> tag below, any of the common HTML attributes can also be coded.

<dt> Tag Examples

Examples of the `dt` tag in HTML 5

Example of the <dt> tag in a list of definitions

(see <dt> tag demo above)

Here is an example of how to code a glossary of some HTML terms and their definitions.

<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>

Note that since the <dl> tag, <dt> tags and <dd> tags do not indicate that this is a list of terms and their definitions, each term is coded inside a dfn element.

Changes in HTML 5 - <dt> 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 dt 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