<DL> Description Lists or Definition List In html to display terms name and description

<DL>
 <DT>Item 1 or Name 1 </DT>
 <DD>Description of item 1</DD>
 
 <DT>Item 2 or Name 2 </DT>
 <DD>Description of item 2</DD>
 
 <DT>Item 3 or Name 3 </DT>
 <DD>Description of item 3</DD>
</DL>

Item 1 or Name 1: Description of item 1
Item 2 or Name 2: Description of item 2
Item 3 or Name 3: Description of item 3

<DL>

Definition Description List , One pair of tag is allowed.

<DT>

Terms or Name List, Mulitple pairs allowed. Child of <DL>

<DD>

Definition Description of <DT> Multiple pairs allowed. Child of <DT>

Definition lists marks its elements by indentation.

DEMO of <DL> tag

Single Term with multiple descriptions

<DL>
 <DT>Item 1 or Name 1 </DT>
 <DD>Description No 1 of item 1</DD>
  
 <DD>Description No 2 of item 1</DD>
  
 <DD>Description No 3 of item 1</DD>
</DL>

DEMO of Single <DT> tag with Multiple <DD>

Multiple Term with single descriptions

<DL>
 <DT>Item 1 or Name 1 </DT>
 <DT>Item 2 or Name 2 </DT>
 <DD>Description </DD>
</DL>

DEMO of Multiple <DT> tag with Single <DD>

Let us go for a practical use of definition list here.

How to reach my home town?

By Rail: Nearest railway station is 10 KM and station name is ……
By road: Well connected national highway passes through my home town
By Air: Nearest airport is at a distance of 60 KM and …..

Description List with style

Demo of HTML Description list with style

<html>
<head>
<title>HTML List demo with style </title>
<META NAME="DESCRIPTION" CONTENT="HTML List demo style ">
<META NAME="KEYWORDS" CONTENT="HTML list demo style "> 
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style>
dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
	margin-left:15px;
	width:500px;
  }

  dt {
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
  }

  dd {
    background-color: #f5f5f5;
    padding: 5px;
    border-radius: 5px;
  }
</style>

</head>
<body>
<DL>
 <DT>Item 1 or Name 1 </DT>
 <DD>Description of item 1</DD>
 
 <DT>Item 2 or Name 2 </DT>
 <DD>Description of item 2</DD>
 
 <DT>Item 3 or Name 3 </DT>
 <DD>Description of item 3</DD>
</DL>

</body>
</html>

HTML List Ordered List in HTML Unordered List

<DL> Definition Description List in html

Single Term with multiple descriptions

Multiple Term with single descriptions

Description List with style

Subscribe