HTML dt Tag Tutorial with Examples – POFTUT
HTML Tag Tutorial with Examples

HTML dt Tag Tutorial with Examples

by

HTML provides the <dt> element in order to add a term in description or definition list. <dt> element is used inside a <dt> element and generally followed by a <dt> element. The <dt> element is the short form of the Description Details where the description details about the provided element are provided. The <dt> HTML tag is supported by all major browsers like Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari and their mobile versions.

HTML <dt> ,<dl> ,<dd> Tags Relation

As stated previously <dt> HTML tag is used inside the <dl> tag where <dl> is used to create a description list. <dd> is used under a <dt> tag where the <dd> tag content is the explanation of the <dt> tag. The <dd> tag content is tabbed according to the <dt> tag content.

HTML <dt> Syntax

<dt> tag has a simple syntax where ended with the enclosing </dt> tag. It will follow the <dd> tag like below. In the following example we will provide the domain name of the different web sites with <dt> tag and provide description about site by using <dd> tag.

<html>
<body>

<h1>HTML dt Tag Tutorial</h1>

<p>This is a description list:</p>

<dl>
  <dt>Poftut.com</dt>
  <dd>IT Tutorial Web Site</dd>
  <dt>Kaleinfo.com</dt>
  <dd>KaleInfo Company Web Site</dd>
  <dt>SiberHavadis.com</dt>
  <dd>Cyber News Site</dd>
</dl>

</body>
</html>

HTML <dt> Styling

The <dt> tag can be easily styled by using CSS like below. In the following example we set the margin-left 5 px and color red for the <dt> tag.

<html>
<head>
  <style>
    dt {
      display: block;
      margin-left: 5px;
      color:red;
    }
 </style>
</head>

<body>

<h1>HTML dt Tag Tutorial</h1>

<p>This is a description list:</p>

<dl>
  <dt>Poftut.com</dt>
  <dd>IT Tutorial Web Site</dd>
  <dt>Kaleinfo.com</dt>
  <dd>KaleInfo Company Web Site</dd>
  <dt>SiberHavadis.com</dt>
  <dd>Cyber News Site</dd>
</dl>

</body>
</html>
HTML dt Styling

LEARN MORE  HTML br Tag For Single Lines Break Tutorial with Examples

Leave a Comment