HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <dd> Tag


Concept

The <dd> tag in HTML is used to describe a term or name in a description list (<dl>). It’s typically used in conjunction with the <dt> tag, which defines the term itself. The <dd> tag provides the details or explanation for the term. Together, the <dt> and <dd> tags create a key-value pair within the description list, allowing for a structured presentation of information.

Implementation

Example 1: Defining a Computer Term

Here’s an example of how you can use the <dd> tag to define a computer-related term:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, the standard markup language for documents designed to be displayed in a web browser.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, a style sheet language used for describing the look and formatting of a document written in HTML.</dd>
</dl>

Example 2: Defining a Cooking Term

You can also use the <dd> tag to define cooking-related terms:

<dl>
  <dt>Sauté</dt>
  <dd>A method of cooking food that uses a small amount of oil or butter in a shallow pan over relatively high heat.</dd>
  <dt>Braise</dt>
  <dd>A combination-cooking method that uses both wet and dry heats: typically, the food is first seared at a high temperature, then finished in a covered pot at a lower temperature.</dd>
</dl>

Try it out below:

Loading

Attributes


Global Attributes

The <dd> tag supports all the global attributes in HTML.

Event Attributes

The <dd> tag also supports all the event attributes in HTML.

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

Default CSS Settings

Most browsers will display the <dd> element with the following default CSS settings:

dd {
  display: block;
  margin-left: 40px;
}

Conclusion

The <dd> tag is an essential part of creating description lists in HTML. It allows for the clear and structured presentation of terms and their corresponding descriptions.


Whether you’re defining technical jargon, explaining cooking techniques, or providing glossaries for specialized content, the <dd> tag helps make the information more accessible and user-friendly.