Web Development: HTML Element: dl

Thursday, August 17, 2023

HTML Element: dl

The HTML <dl> element represents a “description list”. It’s used to present a list of terms and their corresponding descriptions or definitions. You’ll see the <dl> element used for glossaries, metadata, or any situation requiring a list of terms and their explanations.

Syntax

The <dl> element wraps one or more <dt> (term) elements followed by their corresponding <dd> (description) elements:

1	<dl>
2	<dt>Term 1</dt>
3	<dd>Description 1</dd>
4	<dt>Term 2</dt>
5	<dd>Description 2</dd>
6	<!-- More terms and descriptions -->
7	</dl>

Example

Here’s an example of a simple glossary created using the <dl> element:

Attributes

The <dl> element does not have any specific attributes, however, it does inherit from global attributes defined in HTML.

Content

The <dl> element accepts the following content:

<dt> (term): Represents the term or label.
<dd> (description): Represents the corresponding description or definition for the term.

Did You Know?

The order of <dt> and <dd> elements within a <dl> does not matter. Browsers usually render them in the order they appear in the HTML, but their visual styling can be modified using CSS.