Description List in HTML
Working with List
In this lesson, we will learn how to create and use the description list in HTML.
What is Description List in HTML
A description list in HTML displays a list of terms and their corresponding definitions. The <dl> tag is used to define a description list. The description list tag is usually used with two other tags: <dt> and <dd>. The <dt> tag is used to define the term, and the <dd> tag is used to define the description.
Here's an example of how to create a description list in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Description List Example</title>
</head>
<body>
<dl>
<dt>Variable</dt>
<dd>A named container for a value that can be changed.</dd>
<dt>Function</dt>
<dd>A reusable block of code that performs a specific task.</dd>
<dt>Array</dt>
<dd>An ordered collection of values that can be accessed by their index.</dd>
</dl>
</body>
</html>In the above example, we have created a description list using the <dl> tag. Under the <dl> tag, we defined three programming concepts: variables, functions, and arrays using the <dt> tag. We have also briefly described each concept using the <dd> tag.
Nested Description Lists
A description list can also be nested within another description list. It can be useful for presenting related terms and their descriptions. Here is an example:
Example
<dl>
<dt>HTML</dt>
<dd>
<dl>
<dt>HTML5</dt>
<dd>The latest version of HTML.</dd>
<dt>XHTML</dt>
<dd>Extensible HyperText Markup Language is a family of XML markup languages.</dd>
</dl>
</dd>
<dt>CSS</dt>
<dd>
<dl>
<dt>CSS1</dt>
<dd>The first version of CSS.</dd>
<dt>CSS2</dt>
<dd>The second version of CSS.</dd>
<dt>CSS3</dt>
<dd>The third and latest version of CSS.</dd>
</dl>
</dd>
</dl>The id Attribute
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the <dl> tag and use it to apply a specific style to that particular tag.
Example
<dl id="mylist">
<dt>HTML</dt>
<dd>HTML stands for Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets.</dd>
</dl>In the above example, we assign an id attribute to the dl tag with a value mylist. In CSS and JavaScript, we can use the name mylist to access the specific dl tag whose id value is set to the name mylist.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
The class Attribute
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the dl tags and use it to apply a specific style to all the dl tags that belong to a particular class.
Example
<dl class="info">
<dt>Variable</dt>
<dd>A named container for a value that can be changed.</dd>
<dt>Function</dt>
<dd>A reusable block of code that performs a specific task.</dd>
</dl>
<dl class="info">
<dt>HTML</dt>
<dd>HTML stands for Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets.</dd>
</dl>In the above example, both dl tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both dl tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
The style Attribute
The style attribute can be used to apply inline css styles to both dl and li tags. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<dl style="color: red">
<dt>HTML</dt>
<dd>HTML stands for Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets.</dd>
</dl>The style="color: red" will change the font color of all the list items of the dl tag to red.
The title Attribute
The title attribute can be used to add a tooltip or additional information to the dl tag, which will only appear when the user places the mouse cursor on the description list.
Example
<dl title="Some important terms and their full form used in internet world.">
<dt>HTML</dt>
<dd>HTML stands for Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets.</dd>
</dl>