HTML Description List Tutorial

In this tutorial, we will talk about the HTML description list and look deeper of how an unordered list can do and achieve.

How Description List Looks

Before we start that, let me show you how description list looks at the web page. The description list is good for listing terms with descriptions. If you would like to list the terms with descriptions, this is the list you are looking for. Here are one of the example of Description list.

HTML

is stands for Hypertext Markup Language.

CSS

is stands for Cascading Style Sheet.

JS

is stands for JavaScript.

How Description List In HTML Code

To create a Description list, you will start with <dl> element and creating the <dt> and <dd> element of each definition term and definition description inside of <dl>.

<dl>
    <dt>HTML</dt>  
    <dd>is stands for Hypertext Markup Language.</dd>  
    <dt>CSS</dt>  
    <dd>is stands for Cascading Style Sheet.</dd>  
    <dt>JS</dt>  
    <dd>is stands for JavaScript.</dd>  
</dl>  

Break Down Explanation for Description List In HTML

From the code above, you can see the list item stored inside the <dl>. If you which to add more terms and descriptions. You will need to add <dt> element for each description term and <dd> for the description detail of that term.

<dl>: It defines a description list in HTML.
<dt>: It defines a description term in HTML.
<dd>: It defines a description detail in HTML.