HTML <dd> Tag
The <dd> tag is used to define the description, definition, or value of a term within a description list (<dl>). It's a fundamental element for creating semantic and structured lists where each term (<dt>) is associated with a corresponding description.
Syntax
<dd>Description text</dd>
Attributes
The <dd> tag supports the Global Attributes in HTML.
| Attribute | Value | Description |
|---|---|---|
| class | classname | Specifies one or more class names for an element (refers to a class in a style sheet) |
| dir | ltr, rtl, auto | Specifies the text direction for the content in the element |
| id | id | Specifies a unique ID for the element |
| lang | language_code | Specifies the language of the element's content |
| style | CSS properties | Specifies inline CSS styles for the element |
| tabindex | number | Specifies the tab order of the element |
| title | text | Specifies extra information about the element |
| hidden | hidden | Specifies that the element should be hidden |
| accesskey | character | Specifies a shortcut key to activate/focus an element |
| draggable | true, false, auto | Specifies whether the element is draggable |
| contenteditable | true, false | Specifies whether the content of an element is editable |
| spellcheck | true, false | Specifies whether the element is to have its spelling and grammar checked |
| translate | yes, no | Specifies whether the content of an element should be translated |
Example
<dl>
<dt>Coffee</dt>
<dd>A hot beverage made from roasted coffee beans.</dd>
<dt>Tea</dt>
<dd>A popular drink made by steeping the leaves of the tea plant.</dd>
</dl>
More Examples
Basic Use Case
This example demonstrates a typical definition list where each term has a corresponding description.
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language, the foundation of web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used for styling and layout.</dd>
<dt>JavaScript</dt>
<dd>A scripting language for interactive web content.</dd>
</dl>
Multiple Descriptions for One Term
A single term can have multiple descriptions using multiple <dd> tags:
<dl>
<dt>Apple</dt>
<dd>A round fruit with red, green, or yellow skin.</dd>
<dd>A large tech company known for its innovative products.</dd>
</dl>
Nested Lists within Descriptions
You can also nest other lists or elements within the <dd> for more complex structuring.
<dl>
<dt>Web Development Tools</dt>
<dd>
<ul>
<li>Code Editor</li>
<li>Browser</li>
<li>Version Control System</li>
</ul>
</dd>
<dt>Web Design</dt>
<dd>The process of planning, creating and maintaining website.</dd>
</dl>
Using Styles on Description
You can apply styles to the <dd> using classes and CSS:
<style>
.custom-description {
margin-left: 30px;
font-style: italic;
color: #555;
}
</style>
<dl>
<dt>Example Term</dt>
<dd class="custom-description">This is a description with custom styling.</dd>
</dl>
Browser Support
The <dd> tag is supported in all modern browsers.
| Browser | Version |
| — | — |
| Chrome | Yes |
| Edge | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
Notes and Tips
- The
<dd>tag must be placed inside a<dl>tag and should be preceded by a<dt>tag. - It is semantically important to use description lists correctly, as they convey a clear relationship between terms and their descriptions.
- Avoid using
<dd>tags for purposes other than defining descriptions within a description list, this will lead to improper HTML structure. - Multiple
<dd>tags can follow a single<dt>tag, allowing you to add multiple definitions or details for one term. - Use CSS to control the visual appearance of
<dd>elements, but avoid using styles to create layout effects which should ideally be done through proper semantic HTML. - Description lists are particularly useful for glossaries, FAQ pages, or any other content where you have terms and associated descriptions.
