How to add description list of an element using HTML ?

Last Updated : 30 May, 2020

To define the description of an element, the <dl> tag is used. This tag is used with <dt> and <dd> tag. In HTML4.1, it defines the definition list and in HTML5, it defines the description list.

Syntax:

<dl> Contents... </dl>

Example 1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to add description list 
        of an element using HTML? 
    </title> 
  
    <style> 
        h1, 
        h2 { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        dl { 
            margin-left: 20%; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2> 
        How to define a description/value 
        of a term in a description list 
    </h2> 
  
    <dl> 
        <dt>GeeksforGeeks</dt> 
        <dd>A Computer Science Portal For Geeks</dd> 
    </dl> 
      
    <dl> 
        <dt>C++</dt> 
        <dd>A Object oriented language.</dd> 
        <dt>JavaScript</dt> 
        <dd>A client side scripting language.</dd> 
    </dl> 
</body> 
  
</html> 

Output:

Example 2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to add description list 
        of an element using HTML? 
    </title> 
  
    <style> 
        h1 { 
            color: green; 
        } 
  
        h1, 
        h2 { 
            text-align: center; 
        } 
  
        body { 
            width: 70%; 
        } 
  
        dt { 
            color: red; 
        } 
  
        dd { 
            display: inline; 
            margin-left: 60px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <center> 
        <h4> 
            How to define a description/value 
            of a term in a description list 
        </h4> 
    </center> 
  
    <dl> 
        <dt>Geeks Classes</dt> 
        <dd> 
            It is an extensive classroom programme 
            for enhancing DS and Algo concepts. 
        </dd> 
        <br /> 
  
        <dt>Fork Python</dt> 
        <dd> 
            It is a course designed for  
            beginners in python. 
        </dd> 
  
        <br /> 
        <dt>Interview Preparation</dt> 
        <dd> 
            It is a course designed for  
            preparation of interviews in  
            top product based companies. 
        </dd> 
    </dl> 
</body> 
  
</html> 