1. html
  2. /tags
  3. /dl

<dl>

Definition

The <dl> element in HTML, also known as a description list, is used to group a set of terms and their corresponding descriptions. Each term is represented by a <dt> element, and each description is represented by a <dd> element. This element is often used to create glossaries or lists of key-value pairs.

Examples

Below, you can see the <dl> element is used to create a definition list with two items: "Apple" and "Orange". The <dt> element is used to specify the term being defined, and the <dd> element is used to provide the definition for that term.

<dl>
	<dt>Apple</dt>
	<dd>A round fruit with red or green skin and a white, crispy inside.</dd>
	<dt>Orange</dt>
	<dd>A round fruit with a thick, orange skin and a juicy, tangy inside.</dd>
</dl>

To format a description list like this, your CSS might look like:

dl {
	width: 50%;
	margin: auto;
	padding: 10px;
	border: 1px solid #ccc;
}

dt {
	font-weight: bold;
	margin-bottom: 10px;
}

dd {
	margin-left: 20px;
}

This will style the <dl> by setting its width to 50%, centering it on the page, and adding padding and a border. It also alters the <dt> and <dd> elements by making the <dt> bold and increasing the left margin of the <dd> element.

Attributes

This element makes use of the global attributes.

Best Practices

  • Use the <dl> element to create a list of key-value pairs.
  • Use the <dt> element to wrap the key, and the <dd> element to wrap the value.
  • Use multiple <dt> elements if necessary to describe the value, and multiple <dd> elements if necessary to describe multiple values for the key.
  • Place the <dl> element within the <body> element.
  • Use the <dl> element to create a list of terms and their definitions, but not for other types of lists.

Accessibility Considerations

Bearing in mind accessibility, the structure of the <dl> element should be properly marked up, with each term and description being contained within the appropriate <dt> and <dd> elements. This will help screen readers to properly interpret the content and present it to users in a logical and understandable way.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes