HTML - <dt> Tag

HTML <dt> tag is used to defines a data term within a description or definition list. It should be used within the <dl> tag (is the parent tag of the <dt> tag).

We can create multiple <dt> tags in a row that denote multiple data terms that are defined by the immediate next <dd> tag. After each <dt> tag you can have a <dd> tag that describes the term found in the <dt> tag.

Syntax

<dl>
   <dt></dt>
   <dt></dt>
   ….
</dl>

Attribute

HTML dt tag supports Global and Event attributes of HTML.

Examplees of HTML dt Tag

Bellow examples will illustrate the usage of dt tag. Where, when and how to use dt tag.

Creating dt Element

In the following example, we are creating a description list using the <dl> tag. Then, using the <dt> tag, we are creating a data term within the <dl> tag to display the data terms of the list items.

<html lang="en">
<head>
   <title>HTML dt Tag</title>
</head>
<body>
   <!-- Creating dt Itemes -->
   <dl>
      <dt>Data Term1</dt>
      <dt>Data Term2</dt>
      <dt>Data Term3</dt>
   </dl>
</body>
</html>

Creating dt element with dd element

In this example, we are creating a single data term using the <dt> tag and multiple data descriptions using the <dd> tag within the <dl> tag to display the data term and data description of the list items.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Description lists</title>
</head>
<body>
   <!--create a description list-->
   <dl>
      <dt>Data Term</dt>
      <dd>Data description1.</dd>
      <dd>Data description2.</dd>
      <dd>Data description3.</dd>
   </dl>
</body>
</html>

Creating multiple dt with dd elements

In this program, we are creating a description list using <dl> tag. Then, using the <dt> and <dd> tags, we are creating multiple data terms and descriptions to display the data terms and data descriptions of this list item.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Description lists</title>
</head>
<body>
   <!--create a description list-->
   <dl>
      <dt>HTML</dt>
      <dd>Hyper Text Markup Language.</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheet.</dd>
      <dt>JS</dt>
      <dd>JavaScript.</dd>
   </dl>
</body>
</html>

Supported Browsers

Tag
dt	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm