Description lists in HTML are used to display terms and their corresponding descriptions in a structured format.
- Created using <dl>, <dt>, and <dd> tags.
- <dt> defines the term, while <dd> defines its description.
- Commonly used for glossaries, definitions, and metadata lists.
Syntax:
<dl> Contents of the list </dl>Example 1: In this example, we will use <dl> tag.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
Description lists in html
</title>
</head>
<!--Driver Code Ends-->
<body>
<h1>GeeksForGeeks Courses</h1>
<h2>
Live courses at GeeksForGeeks
and their Description
</h2>
<dl>
<dt>
Full Stack Development with
React & Node JS - Live:
</dt>
<dd>
Learn how to develop Single
Page Web Applications.
</dd>
<dt>System Design - Live:</dt>
<dd>
For individuals looking to
crack SDE job interviews.
</dd>
<dt>JAVA Backend Development - Live:</dt>
<dd>Learn backend development with Java</dd>
<dt>DSA Live for Working Professionals:</dt>
<dd>
A LIVE classroom program designed
for Working Professionals
</dd>
</dl>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
Example 2: In this example, we will use <dl> with <dt>, <dd> tags.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>Description lists in html</title>
</head>
<!--Driver Code Ends-->
<body>
<h1>GeeksForGeeks problem difficulties</h1>
<h2>
This is Type and description of problem
difficulty levels <br>at Practice
platform of GeeksForGeeks.
</h2>
<dl>
<dt>School:</dt>
<dd>Basic/school level problems</dd>
<dt>Basic:</dt>
<dd>Simple logical problems</dd>
<dt>Easy:</dt>
<dd>
Problems based on simple
data structures and logic
</dd>
<dt>Medium:</dt>
<dd>Medium level problems based on dsa</dd>
<dt>Hard:</dt>
<dd>High level logical thinking problems</dd>
</dl>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->