dt Tag in HTML


The <dt> tag in HTML is used to define a term in a description list created with the <dl> tag. In this tutorial, we will cover how to use the <dt> tag to define terms in a description list and apply styling to it.

Basic Usage

The basic syntax of the <dt> tag is as follows:

<dt>Term 1</dt>
<dd>Definition 1</dd>

<dt>Term 2</dt>
<dd>Definition 2</dd>


In this example, we have defined a description list with two terms and their corresponding definitions. The <dt> tag is used to define the term, and the <dd> tag is used to define the definition.

Styling the Term

You can use CSS to style the <dt> tag and its child elements. Here’s an example of how to use CSS to apply some basic styling to a term in a description list:

dt {
font-weight: bold;
color: #333;
margin-bottom: 10px;

<dt>Term 1</dt>
<dd>Definition 1</dd>

<dt>Term 2</dt>
<dd>Definition 2</dd>


In this example, we use CSS to apply the following styles to the term in the description list:

  • font-weight: bold; is used to make the term bold.
  • color: #333; is used to set the color of the term to dark gray.
  • margin-bottom: 10px; is used to create some spacing between the term and the definition.
Also Read:  i Tag in HTML

Accessibility Considerations

When using the <dt> tag, it’s important to ensure that the content within the <dt> tag is accessible to all users, including those who use assistive technologies such as screen readers. Here are some tips for creating accessible content within a <dt> tag:

  • Use semantic HTML elements whenever possible to convey the meaning of the content.
  • Use descriptive text for links and images, and provide alternative text for non-text content.
  • Ensure that the content is readable and has sufficient contrast between the text and the background.
  • Use appropriate heading levels to indicate the structure and hierarchy of the content.


The <dt> tag is a useful HTML element that is used to define a term in a description list created with the <dl> tag. By using CSS to style the term, you can create a visually appealing and user-friendly layout. By following best practices for accessibility and using semantic HTML elements whenever possible, you can create content that is both functional and accessible to all users.

Previous articledl Tag in HTML
Next articleem Tag in HTML
Namaskaar, Friends main Kapil byteshastra.com ka Founder hu. Mere kai English blog bhi hai ,par mera motive yahan par easy language mein Technology se related Gyan ko aap tak pahunchane ka hai .taki aap kuch naya shikh sake. meri koshish hai ki bilkul simple tarike se aap ko nyi updates deta rahu taki aap bhi technology ke is yug mein peeche na rahe aur shikte rahe.Mujhse judne ke liye app mujhe Social Media par follow kar sakte hai.

Leave a Reply