HTML - Definition Lists

Quiz

A description list is defined by <dl> tag along with the <dt> and <dd> tags. Where <dt> tag defines the definition term, and <dd> tag defines the corresponding definition.

HTML Definition Lists

HTML definition lists define list items having the structure of terms and their corresponding definitions. These types of lists are used to define a listing structure where each list item (data term) contians its corresponding explanation (definition description).

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>

Definition List Tags

The following are the HTML tags used for defining definition lists:

<dl>: This tag defines the definition list.
<dt>: This tag defines the description term.
<dd>: This tag defines the corresponding description for the given definition term.

Creating Definition List

To create a definition list, you need to use the <dl> tag along with the <dt> and <dd> tags.

Where,

<dl> is used as a container tag for the definition list.
<dt> is used to define the terms that you want to define.
<dd> is used to place the definitions for the corresponding terms.

Syntax

Below is the syntax (structure) of creating a definition list in HTML:

<dl>
  <dt>Term 1</dt>
  <dd>Definition for Term 1</dd>
  <dt>Term 2</dt>
  <dd>Definition for Term 2</dd>
  <dt>Term 3</dt>
  <dd>Definition for Term 3</dd>
</dl>

Example of Definition List

In the following example, we are creating a definition list with four terms along with their corresponding descriptions:

<!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>
   </dl>
</body>
</html>

Styling Definition Lists

You can also customize the default appearance of the definition lists using the CSS properties. You can apply the CSS styles on all three definition list tags to style them as per your requirement to match with the website theme.

Example

In the following example, we are applying CSS properties to customize the appearance of the definition list:

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: Arial, sans-serif;
         margin: 20px;
      }
      dl {
         background-color: #f9f9f9;
         border: 1px solid #ddd;
         padding: 20px;
         border-radius: 5px;
         max-width: 400px;
         margin: 0 auto;
      }
      dt {
         font-weight: bold;
         color: #333;
         margin-top: 10px;
      }
      dd {
         margin: 0 0 10px 20px;
         color: #555;
      }

   </style>
</head>

<body>

<dl>
<dt>Tutorialspoint</dt>
   <dd>
      Tutorialspoint provides access to a library 
      of video courses on various prominent 
      technologies, aimed at helping individuals 
      master those technologies and become 
      certified professionals.
   </dd>

<dt>Tutorix</dt>
   <dd>
      Tutorix is child company of tutorialspoint 
      that covers NCERT-based syllabus for maths 
      and science. Also give a great foundation 
      for IIT/JEE and NEET aspirants.
   </dd>
</dl>

</body>
</html>

Default CSS for Definition Lists

There are default CSS settings for almost all browsers that display the<dl> elements.

Example

The following code constains the default CSS properties for the definition list. If you remove them, nothing will change in output:

<!DOCTYPE html>
<html>
<head>
   &lt!-- This is default style of Definition Lists -->
   <style>
      dl {
         display: block;
         margin-top: 1em;
         margin-bottom: 1em;
         margin-left: 0;
         margin-right: 0;
      }
   </style>
</head>

<body>
   <dl>
      <dt>Definition List</dt>
      <dd>
         A list of terms and their definitions.
      </dd>

      <dt>Android</dt>
      <dd>Android tutorial.</dd>

      <dt>Ruby</dt>
      <dd>Ruby tutorial.</dd>
   </dl>
   <p>
      We added default style to Description List
   </p>
</body>

</html>

Nested Definition Lists

Nested definition lists allow you to add detailed sub-definitions within a main definition term.

Example

The following example demonstrates the nested definition lists in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Nested Definition Lists Example</title>
</head>
<body>
  <h2>Nested Definition Lists Example</h2>
  <dl>
    <dt>Programming Languages</dt>
    <dd>
      <dl>
        <dt>Python</dt>
        <dd>A high-level, interpreted programming language.</dd>
        <dt>JavaScript</dt>
        <dd>A language used for web development.</dd>
      </dl>
    </dd>
    <dt>Web Technologies</dt>
    <dd>
      <dl>
        <dt>HTML</dt>
        <dd>The standard markup language for creating web pages.</dd>
        <dt>CSS</dt>
        <dd>Used for styling web pages.</dd>
      </dl>
    </dd>
  </dl>
</body>
</html>

Print Page