HTML - Definition Lists

Previous
Next

HTML definition lists is used to defines a description list, it is represented by using <dl> tag. It is used along 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>

HTML Definition/Description Lists Tags

Below mentioned tags are used to create description or definition lists in HTML.

Syntax

<dl>
   <dt>Heading 1</dt>
      <dd>Description 1</dd>
   <dt>Heading 2</dt>
      <dd>Description 2</dd>
</dl>

Examples of Definition Lists

Following are some examples that shows how to define a definition list in HTML.

Define Definition List

Following is an example of defining a definition list in 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>
   </dl>
</body>
</html>

Styling Definition List using CSS

In the following example, we are using CSS to style 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 List

There are default CSS settings for almost all browsers that display the <dl> elements. In the following code if you remove style, nothing will change in output as the style we defined is default style of <dl> tag.

<!DOCTYPE html>
<html>
<head>
   <!-- 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>
Print Page
Previous
Next
Advertisements