HTML5 <dt> Tag

The HTML <dt> tag is used to represent a term in a description list. This element can occur only as a child element of a <dl> tag. It is usually followed by a <dd> element. However, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.

The only content permitted inside this element is flow content. The only condition is that there should be no <header>, <footer>, sectioning content or heading content descendants. This element must have a start tag. The end tag may be omitted if this element is immediately followed by another <dd> element, or if there is no more content in the parent element.

The <dt> tag is allowed to come before a <dt> or a <dd> element or inside a <dl>.

The following style is applied to this element by default:

dt {
  display: block;
}

Here is an example of using this tag:

<article>
  <h1>FAQ</h1>
  <dl>
    <dt>What is a black hole?</dt>
    <dd>A black hole is the darkest, densest object ever hypothesized. A black hole has such strong gravity not even light can escape - causing it to appear black.</dd>
    <dt>Will a black hole some day destroy the earth?</dt>
    <dd>No. There are no black holes near enough to the earth, or even the solar system, to cause any harm.</dd>
    <dt>Can the Sun become a black hole?</dt>
    <dd>The Sun will never become a black hole. It is not big enough.</dd>
  </dl>
</article>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML dt Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <dt> element on MDN.
  2. You can also read the HTML <dt> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top