<DL> Definition Description List in html

<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

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer