How to add description list of an element using HTML ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.