HTML - <dt> Tag

The HTML <dt> tag defines a data term within a description or definition list in the HTML document. 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

Following is the syntax of the <dlt> tag −

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

Example

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.

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

When we run above code, it will generate an output consisting of the text displayed on the webpage.

Example

Following is another example of <dt> tag. Here, we are creating multiple data terms using <dt> within the <dl> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Description lists</title>
</head>
<body>
   <!--create a description list-->
   <dl>
      <dt>Data Term1</dt>
      <dt>Data Term2</dt>
      <dt>Data Term3</dt>
   </dl>
</body>
</html>

On running the above code, the output window will pop up displaying the text on the webpage.

Example

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>

When we run the above code, the output will pop up displaying the text on the webpage.

Example

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>

On running the above code, it will generate an output consisting of the text displayed on the webpage.

html_tags_reference.htm
Advertisements