Menu

HTML dt Tag

HTML dt Tag

The HTML <dt> tag is used to add a term in a description list, which is created using the <dl> tag. There are three tags which are used to create a description list, they are:

  1. <dl> tag
  2. <dt> tag
  3. <dd> tag

The dt in <dt> tag means description term. The <dt> tag is always used inside the <dl> tag. And to provide the description of terms provided in the <dt> tag we use the <dd> tag just after the <dt> tag.

Also, this is a block-level element.

If on a webpage you want to display multiple terms and its definition or description, then you must use the description list, term and description tag to implement this.

HTML <dt> Tag - Syntax and Usage

The <dt> element requires the start(opening) tag and end(closing) tag.

Following is the syntax for using the this tag in your HTML code:

<dl>
    <dt>
        Term here
    </dt> 
    <dd>   
        Term description
    </dd>
</dl>

As the <dt> tagis used within the description list tag <dl> hence the above syntax.

HTML <dt> Tag Basic Example

Below we have a basic example showing how we use the HTML <dt> tag:

<!DOCTYPE html>
    <head>
        <title>
            HTML dt tag example
        </title>
    </head>
    <body>
        <h2>Example of &lt;dt&gt; tag</h2>
        
        <p>We use dl, dt, dd tags to create a description list:</p>
        
        <dl>
          <dt><b>HTML</b></dt>
          <dd>Used to create static Web Pages</dd>
          <dt><b>CSS</b></dt>
          <dd>Used for styling a Web Page</dd>
        </dl>

    </body>
</html><!DOCTYPE html>
    <head>
        <title>
            HTML dt tag example
        </title>
    </head>
    <body>
        <h2>Example of &lt;dt&gt; tag</h2>
        
        <p>We use dl, dt, dd tags to create a description list:</p>
        
        <dl>
          <dt><b>HTML</b></dt>
          <dd>Used to create static Web Pages</dd>
          <dt><b>CSS</b></dt>
          <dd>Used for styling a Web Page</dd>
        </dl>

    </body>
</html>

HTML <dt> Tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes.

Default CSS style for HTML <dt> Tag

Most of the Browsers use these default CSS Settings:

dt {
    display: block;
}

Browser Support for HTML <dt> Tag

Following browsers support this attribute:

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 2+
  • Apple Safari 1+
  • Opera 2.1+