DL, DT, DD TAGS LIST DATA

Definition Lists versus Tables

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. 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.

Name:	John Don
Age:	23
Gender:	Male
Day of Birth:	12th May 1996

DL, DT, DD Definition 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. 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. From dl, dt, dd tags example, you can see that the codes are lesser, sleeker and much more semantic.

Name:: John Don
Age:: 23
Gender:: Male
Day of Birth:: 12th May 1996

How To Use DL, DT And DD HTML Tags To List Data vs Table List Data