Description List HTML

HTML Description List

There is another type of list, which is called a description list. Now, let’s have a look at it.

As the name says, this list includes the description of something. It is like we are writing something(some term), and the definition/description of that thing.

Here, we are going to use some more tags, which are <dl>, <dt>, and <dd>. Let’s first explain these tags one by one, and then we will see a code for the description list.

The dl tag → This tag defines a description list.
The dt tag → This tag defines a term in the description list.
the dd tag →This tag represents the description of a particular term(simply, we are using it to describe a term).

Have a look at the below example, where we are trying to make use of the description list –

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Some heading here…</title>
</head>
<body>
<h1>Description list</h1>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, or HTML, is a markup language, with help of which, we can create web pages.</dd>
<br>
<dt>CSS</dt>
<dd>Cascading Style Sheets, or CSS, is used to describe how the HTML elements are displayed on the webpage </dd>
<br>
<dt>JavaScript</dt>
<dd>JavaScript is the programming language for the web. with help of this, we can add interactivity to our webpages.</dd>
</dl>
</body>
</html>

If we try to open the file in the browser, the output is something like this –

Description list HTML

So, as you can see, it looks like we are writing the definitions of some terms. This was about the different types of lists, and we can use the lists, as and when required.