An HTML description list is a list of terms, with a description of each term. The HTML description list is represented as <dl>. Lists in HTML are used for specifying particular information in list form. There are various types of Lists in Html such as Ordered Lists, Unordered Lists, and description Lists.
Description Lists are used for:
- To give definitions to particular terms that we have defined in our lists.
- To have a dictionary type of format(term and definition of term)
Format of description Lists:
- Description Lists are used with description list tag <dl> tag in HTML.
- In <dl> tag we have description terms it is represented as <dt> tag Here we do not use li tag as Other Lists. In <dt> write the terms of the data. We can have different terms with the help of <dl>tag.
- In this we use the data description tag <dd> we use this tag for defining the term that we have stated. for eg. If we declare the term as Pizza then we can have a description as Pizza is a food item.
Syntax:
<dl> Contents of the list </dl>
Example 1: In this example, we will use <dl> tag.
HTML
<!DOCTYPE html><html>
<head>
<title>
Description lists in html
</title>
</head>
<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>
</html>
|
Output:
Example 2: In this example, we will use <dl> with <dt>, <dd> tags.
HTML
<!DOCTYPE html><html>
<head>
<title>Description lists in html</title>
</head>
<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>
</html>
|
Output: