HTML Description Lists
An HTML Description List is not as commonly used as unordered or ordered lists but serves an important purpose for displaying name-value pairs. This type of list is marked up using three tags: <dl>, <dt>, and <dd>.
- <dl> (Description List): This tag defines the description list itself and acts as a container for the list items.
- <dt> (Description Term): Represents a term or a name within the list.
- <dd> (Description Details): Provides the description or definition of the term.
Syntax:
<dl>
<dt>Coffee</dt>
<dd>A hot drink made from roasted
coffee beans.</dd>
<dt>Espresso</dt>
<dd>Strong coffee brewed with steam
through ground beans.</dd>
</dl>
HTML
Description Lists Examples
Example 1: In this example, we demonstrate a description list with terms and
their descriptions.
<!DOCTYPE html>
<html>
<head>
<title>Description Lists Example</title>
</head>
<body>
<h2>HTML Description Lists</h2>
<dl>
<dt>HTML</dt>
<dd>
HyperText Markup Language
</dd>
<dt>CSS</dt>
<dd>
Cascading Style Sheets
</dd>
<dt>JavaScript</dt>
<dd>
Scripting language for Web pages
</dd>
</dl>
</body>
</html>
Output:
Nested
Description List
A nested description list is
when we add a description list inside another description list. This allows for
organizing related terms and their definitions in a hierarchical structure, as
demonstrated in the example:
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Nested Description List</title>
</head>
<body>
<h3>Technology Overview</h3>
<dl>
<dt>Hardware</dt>
<dd>Physical devices</dd>
<dd>
<dl> <!-- Nested Description List for Hardware Types -->
<dt>CPUs</dt>
<dd>Processors</dd>
<dt>GPUs</dt>
<dd>Graphics</dd>
</dl>
</dd>
<dt>Software</dt>
<dd>Programs/Apps</dd>
<dd>
<dl> <!-- Nested Description List for Software Types -->
<dt>System</dt>
<dd>OS</dd>
<dt>Application</dt>
<dd>Tools</dd>
</dl>
</dd>
</dl>
</body>
</html>
Output:
