dl Tag in HTML


The <dl> tag in HTML is used to define a description list. It is typically used to display a set of terms and their definitions. In this tutorial, we will cover how to use the <dl> tag to create a description list and apply styling to it.

Basic Usage

The basic syntax of the <dl> 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 Description List

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

dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0;
padding: 0;

dt {
font-weight: bold;

dd {
margin-left: 0;
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 description list and its child elements:

  • display: flex; and flex-wrap: wrap; are used to create a flexible box layout for the description list.
  • justify-content: space-between; is used to distribute the terms and definitions evenly across the width of the container.
  • margin: 0; and padding: 0; are used to remove any default margins and padding from the description list.
  • font-weight: bold; is used to make the terms bold.
  • margin-left: 0; and margin-bottom: 10px; are used to create some spacing between the terms and definitions.
Also Read:  em Tag in HTML

Accessibility Considerations

When using the <dl> tag, it’s important to ensure that the content within the <dl> 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 <dl> 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 <dl> tag is a useful HTML element that is used to create a description list. By using CSS to style the description list, 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 articlediv tag in HTML
Next articledt 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