YouTip- `).
While commonly associated with dictionary-style definitions, the `
- ` tag is a highly versatile semantic element used for any metadata name-value pairs, such as dialogue scripts, product specifications, or key-value glossaries.
---
## 1. Introduction
The `
- ` tag stands for **Description Details** (or Definition Description). It is designed to be used exclusively as a child of a `
- ` (Description List) element, and it almost always follows a `
- ` (Description Term) element. ### Why Use `
- `?
* **Semantic Accuracy**: Using `
- ` instead of generic `
` or `` tags tells search engines and assistive technologies (like screen readers) that the enclosed text is directly related to the preceding term. * **Accessibility (a11y)**: Screen readers announce description lists differently, allowing visually impaired users to navigate quickly between terms and their corresponding descriptions. * **Styling Flexibility**: By default, browsers apply a left margin (`margin-start`) to `- ` elements, but they can be easily styled with CSS to create modern, responsive layouts like two-column metadata grids. --- ## 2. Syntax and Usage The `
- ` element must be wrapped inside a `
- ` parent container. It can contain flow content, meaning you can place paragraphs, images, links, lists, or even other block-level elements inside it.
### Basic Structure
```html
- Term
- Description of the term
- ` tag supports all **HTML Global Attributes** (such as `class`, `id`, `style`, `lang`, and `dir`) and **Event Attributes**. It does not have any unique, element-specific attributes.
| Attribute | Type | Description |
| :--- | :--- | :--- |
| `class` | *String* | Assigns CSS classes for styling. |
| `id` | *String* | Provides a unique identifier (useful for anchor links). |
| `aria-*` | *String* | Accessibility attributes to define ARIA states and properties. |
---
## 3. Code Example
Below is a complete, semantic, and styled example demonstrating how to use `
- `, `
- `, and `
- ` to build a modern, responsive product specification sheet.
```html
HTML dd Tag Example ``` --- ## 4. Best Practices and Common Pitfalls ### 1. Always Wrap `Device Specifications
- Product Name
- UltraBook Pro 15
- Processor
- Octa-core ARM-based Architecture
- Memory Options
- 16 GB Unified RAM
- 32 GB Unified RAM
- Storage
- 512 GB PCIe NVMe SSD
- Operating System
- WebOS Desktop Edition
- ` in a `
- ` Parent
A `
- ` element is invalid HTML if it is not a direct child of a `
- ` element (or wrapped inside a `
- Term
- Description
- Term
- Description
- ` tag. When building custom layouts (like grids or flexbox), always explicitly reset this margin in your CSS:
```css
dd {
margin: 0;
}
```
### 3. Do Not Use for Visual Indentation Alone
Because browsers indent `
- ` by default, developers sometimes misuse it to indent regular body text. This breaks semantic structure and confuses screen readers. If you only need visual indentation, use CSS `margin-left` or `padding-left` on a standard `
` or `
` tag instead. - ` by default, developers sometimes misuse it to indent regular body text. This breaks semantic structure and confuses screen readers. If you only need visual indentation, use CSS `margin-left` or `padding-left` on a standard `
` that is a direct child of a `- ` in modern HTML5).
* **Incorrect:**
```html
``` * **Correct:** ```html
- ` instead of generic `
- ` tag stands for **Description Details** (or Definition Description). It is designed to be used exclusively as a child of a `
Tag Dd
The HTML `` element represents the description, definition, or value of a preceding term (` `) within a description list (`