How to use HTML dl, dt, dd tags

Many web developers would love to create web design using table tags. In fact, by using HTML dl, dt, dd tags, you will save on writing more codes and add more semantic value to the content. Whereas table are best use for tabular data, and should not be use in listing data, web form or web layout.

If you are still creating list data using table, look below and compare on how to make your life easier with HTML dl, dt, dd tags.

It may both look identical, but look closely behind the codes.

Table List Data

A typical listing data using table can be as follow. First we have a tr table row to hold the title and the data td table cell. Then when we need to style the title element, we will need to give a class to that td table cell.

<table>
 <tr>
  <td class="title">Name: </td>
  <td class="text">John Don</td>
 </tr>
 <tr>
  <td class="title">Age: </td>
  <td class="text">23</td>
 </tr>
 <tr>
  <td class="title">Gender: </td>
  <td class="text">Male</td>
 </tr>
 <tr>
  <td class="title">Day of Birth:</td>
  <td class="text">12th May 1986</td>
 </tr>
</table>

So over here in the CSS, we style the title class that we had declare in the HTML.

/*TABLE LIST DATA*/
table {
 margin-bottom:50px;
}
 
table tr .title {
 background:#5f9be3;
 color:#fff;
 font-weight:bold;
 padding:5px;
 width:100px;
}
 
table tr .text {
 padding-left:10px;
}

From here you can see that if you want to change the design or format for the title in the CSS, you will need to give each td for the title a class. If you want to style the data as well, you will need to give a class to it as well, so you are actually writing a lot of codes. More codes mean larger file size to download, more chances for bugs and harder for you to maintain.

DL, DT, DD List Data

Now, let's look at using HTML dl, dt, dd tags for listing the data. First we have the dl (definition list) tag to hold the whole set of data, next we have dt (defines the item in the list) tag and dd (describes the item in the list) tag to hold the title and the data.

<dl>
 <dt>Name: </dt>
 <dd>John Don</dd>
 
 <dt>Age: </dt>
 <dd>23</dd>
 
 <dt>Gender: </dt>
 <dd>Male</dd>
 
 <dt>Day of Birth:</dt>
 <dd>12th May 1986</dd>
</dl>

Over at CSS, we will need to float the dt tag, so that the title for the list data will align to the left. The rest of the styling is up to you.

/*DL, DT, DD TAGS LIST DATA*/
dl {
 margin-bottom:50px;
}
 
dl dt {
 background:#5f9be3;
 color:#fff;
 float:left;
 font-weight:bold;
 margin-right:10px;
 padding:5px;
 width:100px;
}
 
dl dd {
 margin:2px 0;
 padding:5px 0;
}

From dl, dt, dd tags example, you can see that the codes are lesser, sleeker and much more semantic.

So if you are still using table to consolidate or list your data on the web form and web layout, it's really time now to make the switch. It's definitely going to make your life a lot more easier.