Post
Ask Question

Working With the <dl>, <dt> and <dd> Tags

Introduction

 
The HTML5 dl, dt and dd tags used to list data.
 
The <dl> tag is used to specify (start) the definition list. This tag is commonly used to implement a glossary. You can put only <dt> and <dd> tags inside the <dl> tag.
 
The <dt> tag is used to specify the definition terms or items in a definition list. You can put paragraphs, line breaks, images, links, lists, etc. inside the <dd> tag. You can also use a <dt> tag within <details> and <figure> tags to represent a caption for content.
 
The <dd> tag is used to describe an item within a list of defined terms enclosed by a definition list. You can put paragraphs, line breaks, images, links, lists, etc inside the <dd> tag.
 
Syntax
 
<dl>
        <dt></dt>
             <dd>
             </dd>
</dl>
 
Element-Specific Attribute for <dl> tag
compact This attribute reduces the white space between list items.
 
Element-Specific Attribute for <dt> and <dd> tag
nowrap This attribute is used to control the wrapping of text within a <dd> tag. This attribute ensures that the contents always remain as they are, and don't wrap. If set to yes, the text should not wrap. The default is no. CSS (style sheet) should be
 
used instead of this attribute.
 
HTML5 Event Attributes
onabort; onblur oncanplay
oncanplaythrough onchange onclick
oncontextmenu ondblclick ondrag
ondragend ondragenter ondragleave
ondragover ondragstart ondrop
ondurationchange onemptied onended
onerror onfocus onformchange
onforminput oninput oninvalid
onkeydown onkeypress onkeyup
onload onloadeddata onloadedmetadata
onloadstart onmousedown onmousemove
onmouseout onmouseover onmouseup
onmousewheel onpause onplay
onplaying onprogress onratechange
onreadystatechange onscroll onseeked
onseeking onselect onshow
onstalled onsubmit onsuspend
ontimeupdate onvolumechange onwaiting
 
Code:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title></title>  
  5.     </head>  
  6.     <body>  
  7.         <h5>  
  8.         start <dl> tag </h5>  
  9.         <dl>  
  10.             <dt>This is first dt tag defines items in the list</dt>  
  11.             <dd>  
  12.             This is first dd tag describe an item in a definition list.</dd>  
  13.             <dt>This is second defines items in the list</dt>  
  14.             <dd>  
  15.             This is second dd tag describe an item in a definition list.</dd>  
  16.         </dl>  
  17.         <h5>  
  18.         close <dl> tag</h5>  
  19.         <br />  
  20.         <br />  
  21.         <br />  
  22.         <br />  
  23.         <dl>  
  24.             <dt>Our Network</dt>  
  25.             <dd>  
  26.             .NET Heaven  
  27.         </dd>  
  28.             <dd>  
  29.             C# Corner  
  30.         </dd>  
  31.             <dd>  
  32.             DbTalks  
  33.         </dd>  
  34.             <dd>  
  35.             Interview Corner  
  36.         </dd>  
  37.             <dd>  
  38.             Longhorn Corner  
  39.         </dd>  
  40.             <dd>  
  41.             Mindcracker  
  42.         </dd>  
  43.             <dd>  
  44.             VB.NET Heaven</dd>  
  45.         </dl>  
  46.         <br />  
  47.         <br />  
  48.         <br />  
  49.         <br />  
  50.         <dl>  
  51.             <dt>Our Network</dt>  
  52.             <dd>  
  53.                 <a href="http://www.dotnetheaven.com/">.NET Heaven</a>  
  54.             </dd>  
  55.             <dd>  
  56.                 <a href="http://www.c-sharpcorner.com/">C# Corner</a>  
  57.             </dd>  
  58.             <dd>  
  59.                 <a href="http://www.dbtalks.com/">DbTalks</a>  
  60.             </dd>  
  61.             <dd>  
  62.                 <a href="http://www.interviewcorner.com/">Interview Corner</a>  
  63.             </dd>  
  64.             <dd>  
  65.                 <a href="http://www.longhorncorner.com/">Longhorn Corner</a>  
  66.             </dd>  
  67.             <dd>  
  68.                 <a href="http://www.mindcracker.com/">Mindcracker</a>  
  69.             </dd>  
  70.             <dd>  
  71.                 <a href="http://www.vbdotnetheaven.com/">VB.NET Heaven</a>  
  72.             </dd>  
  73.         </dl>  
  74.     </body>  
  75. </html>  
Output
 
Internet Explorer
 
dl,dt,dd tag
 
Chrome
 
dl,dt,dd tag
 
FireFox
 
dl,dt,dd tag
 
Safari
 
dl,dt,dd tag
 
Opera
 
dl,dt,dd tag


Similar Articles