What is an Description List in HTML ?
Description List is used to display name/value pairs such as terms and definitions.
Each list type has a specific purpose and meaning in a web page.
What are elements used in Description list ?
There are mainly three tags used which are listed below,
1. <dl> tag
Defines a description list.
2. <dt> tag
Defines the description term.
3. <dd> tag
Defines the term in a description list.
1. Simple Description List.
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<dl>
<dt>MK Gandhi</dt>
<dd>Father of our Nation.</dd>
<dt>Abdul Kalaam</dt>
<dd>Best Scientist of India</dd>
<dt>Tendulkar</dt>
<dd>Pride of India</dd>
<dt>Rahul Dravid</dt>
<dd>Great Wall of Indian Cricket</dd>
</dl>
</body>
</html>
Output :
Basic html for beginners !!!
Click to Learn More about – HTML Tutorial for beginners
2. Nested Description List.
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<dl>
<dt>MK Gandhi</dt>
<dd>Father of our Nation.</dd>
<dt>Abdul Kalaam</dt>
<dd>Best Scientist of India</dd>
<dt>Tendulkar</dt>
<dd>Pride of India</dd>
<dl style="color:red">
<dt>Red</dt>
<dd>Defines the color RED</dd>
</dl>
<dl style="color:blue">
<dt>Dog</dt>
<dd>Defines the Faithful Animal</dd>
</dl>
<dt>Rahul Dravid</dt>
<dd>Great Wall of Indian Cricket</dd>
</dl>
</body>
</html>
Output :
3. Description List with inline style
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<dl style="color:blue">
<dt>MK Gandhi</dt>
<dd>Father of our Nation.</dd>
<dt>Abdul Kalaam</dt>
<dd>Best Scientist of India</dd>
<dt>Tendulkar</dt>
<dd>Pride of India</dd>
<dt>Rahul Dravid</dt>
<dd>Great Wall of Indian Cricket</dd>
</dl>
</body>
</html>
Output :
4. Description List with class
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
.dl1{
color:red;
}
</style>
</head>
<body>
<dl class="dl1">
<dt>MK Gandhi</dt>
<dd>Father of our Nation.</dd>
<dt>Abdul Kalaam</dt>
<dd>Best Scientist of India</dd>
<dt>Tendulkar</dt>
<dd>Pride of India</dd>
<dt>Rahul Dravid</dt>
<dd>Great Wall of Indian Cricket</dd>
</dl>
</body>
</html>
Output :
5. Description List with id
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#dl1{
color:brown;
}
</style>
</head>
<body>
<dl id="dl1">
<dt>MK Gandhi</dt>
<dd>Father of our Nation.</dd>
<dt>Abdul Kalaam</dt>
<dd>Best Scientist of India</dd>
<dt>Tendulkar</dt>
<dd>Pride of India</dd>
<dt>Rahul Dravid</dt>
<dd>Great Wall of Indian Cricket</dd>
</dl>
</body>
</html>
Output :
