HTML - Definition Lists

The definition list in HTML defines a description list, it is represented as <dl> tag. It is used in conjunction with <dt> and <dd>.

In HTML Description list or definition list displays its elements in definition form in the dictionary where if we define a description list it will give a description of each item in the list by using the following tags.

The <dl> tag supports almost all browsers. It also supports the global attributes and event attributes. It consists of open and closing tags like <dl></dl>

The description list tags are given below −

  • The <dl> tag is used to define the description list.

  • The <dt> tag is used to define data.

  • The <dd> tag is used to define data definition that is description.

Syntax

Following is the syntax of the definition list −

<dl> Content </dl>

There are default CSS settings for almost all browsers that display the <dl> elements with some default values which are shown below −

dl {
   display: block;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 0;
   margin-right: 0;
}

Example

Following is an example of defining a definition list using CSS −

<!DOCTYPE html>
<html>
<head>
   <style>
      dl {
         display: block;
         margin-top: 1em;
         margin-bottom: 1em;
         margin-left: 0;
         margin-right: 0;
      }
   </style>
</head>
<body>
   <p>Representing dl elements</p>
   <dl>
      <dt>Black Coffee</dt>
      <dd>Hot drink</dd>
      <dt>Pepsi</dt>
      <dd>Cold drink</dd>
   </dl>
   <p>To see the effects, please try to Change the default CSS settings.</p>
</body>
</html>

Example

In the following example, we are trying to create a definition list using HTML

<!DOCTYPE html>
<html>
<body>
   <h2>Different Types Of Languages</h2>
   <dl>
   <dt>English</dt>
   <dd>- English is the first world language. We can use English language for communication in all areas like politics, media, entertainment, art etc.</dd>
   <dt>Hindi</dt>
   <dd>- Hindi is an Indo-Aryan language spoken mostly in India. In India Hindi is spoken as a first language by most of the people.</dd>
   <dt>Marathi</dt>
   <dd>- Marathi is an Indo-Aryan language spoken by Marathi people of Maharashtra in India. It is a official Language of Maharashtrian people</dd>
   <dt>French</dt>
   <dd>- French is the official language in Canada, Central, African, Burkina, Faso, Burundi etc.</dd>
   <dt>Japanese</dt>
   <dd>- Japanese language is mostly spoken by Japanese people in Japan. also it is the national language of Japan.</dd>
   <dt>Spanish</dt>
   <dd>- The language Spanish is derived from Latin which was brought by the Romans during the Second Punic War.</dd>
   </dl>
</body>
</html>

Example

Let us see another example −

<!DOCTYPE html>
<html>
   <head>
      <title>HTML dl Tag</title>
   </head>
   <body>
      <dl>
         <dt>Definition List</dt>
         <dd>A list of terms and their definitions/descriptions.</dd>
         <dt>Android</dt>
         <dd>Android tutorial.</dd>
         <dt>Ruby</dt>
         <dd>Ruby tutorial.</dd>
      </dl>
   </body>
</html>
Advertisements