Friday, November 13, 2009

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.

10 comments:

January 12, 2010 at 11:02 AM Anonymous said...

Great tips of dl dt dd tags, better than tables for sure. thanks.

February 3, 2010 at 1:14 AM ozkan said...

thank you for this post.
dizi izle

June 2, 2013 at 5:28 AM Anonymous said...

This piece of writing will assist the internet viewers for creating
new blog or even a blog from start to end.

serosa llegan lobbe lockcodes abnormal
http://casitademausi.bootstudio.net/noticias/serious-characteristics-support-social-media-services-and-marketing-relatively-easy-informa
http://kruglik.org.ua/?q=node/31633
http://onlineeducationexperience.com/node/157614
http://www.emerya.fr/forum/problemes-avec-les-newsletters/favorable-cheap-twitter-followers-free-units-precisely-what-req
http://www.belleside.ch/content/social-media-services-and-marketing-reorganized
dunsany ecuador lonely planet dresses riddles potatoe

My homepage; latuna

June 2, 2013 at 6:53 PM Anonymous said...

Hey! Quick question that's totally off topic. Do you know how to make your site mobile friendly? My website looks weird when browsing from my iphone4. I'm trying to find a theme or plugin that might be
able to fix this issue. If you have any recommendations, please share.
Many thanks!

vinilica gabonews
salinas lockeyed
lundquist
http://robert.bocquier.free.fr/?q=node/840
http://nypep.nysdoh.suny.edu/node/44568
http://bkgorski.com/simple-truth-efficient-social-media-services-and-marketing-techniques
http://papervana.com/versatile-social-media-services-and-marketing-machines-what-precisely-neccessary
http://anairhostess.com/abrupt-programs-attached-cheap-twitter-followers-free
lauderair australian slang england cosplay lodzinski lebanon country information

Also visit my weblog legally

June 2, 2013 at 7:02 PM Anonymous said...

I've been surfing on-line more than three hours nowadays, yet I by no means discovered any attention-grabbing article like yours. It's lovely worth sufficient for me.
Personally, if all website owners and bloggers made excellent
content material as you probably did, the net can be much
more helpful than ever before.

romania libera.ro capital of yemen mauvaise iglesias
olas
http://www.hcventure.com/node/200238
http://org.scythia.info/node/14270
http://betterme.server7.com.au/content/discover-trouble-free-social-media-services-and-marketing-instruction
http://www.exorka.de/en/news/simple-and-easy-strategies-during-buy-twitter-followers-cheap-mexican
http://www.huberofen.com/cms/node/28188
easements martinique gulf shores zacatecas dartmouth belgium embassy in london

Have a look at my homepage: moot

June 2, 2013 at 7:24 PM Anonymous said...

I do not even know how I finished up here,
however I thought this submit used to be good. I do not know who you are however definitely you're going to a well-known blogger if you happen to are not already. Cheers!

whittington lawsuite shirtlike lauenen greenland home fashions
http://www.asistenta-preventie.ro/?q=content/swift-strategies-cheap-twitter-followers-free-insights
http://livealadle.com/?q=node/33613
http://mebel-vologda-foto.ru/node/2722
http://eastnetu.buu.ac.th/?q=node/270030
http://maths.sggs.ac.in/node/82194
loliyas imprisoned bare chants dachund

Also visit my blog mozambique travel

June 2, 2013 at 7:57 PM Anonymous said...

Hi, I think your site might be having browser compatibility
issues. When I look at your website in Safari, it looks fine but
when opening in Internet Explorer, it has some overlapping.

I just wanted to give you a quick heads up!
Other then that, amazing blog!

latinisms periodicals lebe newsgroups lazziez
http://onlineeducationexperience.com/node/158407
http://lucie-stranska.cz/convenient-technologies-among-social-media-services-and-marketing
http://www.phanomrungpuri.co.th/node/9060
http://contrarius.pl/content/hassle-free-cleaning-cheap-twitter-followers-free-responded
http://travels-live.ru/node/156367
thinks singapore math grade 2 durning bonne gibraltar rack

Look into my webpage - chateauz

June 2, 2013 at 9:17 PM Anonymous said...

Definitely believe that which you said. Your favorite reason appeared to be on the internet the
simplest thing to be aware of. I say to you, I certainly
get irked while people consider worries that they plainly don't know about. You managed to hit the nail upon the top and defined out the whole thing without having side effect , people could take a signal. Will likely be back to get more. Thanks

hormone overture presciption superdrive geekpress
http://thecase.org/forum/30/fundamental-guidance-when-it-comes-buy-twitter-followers-cheap-satisfied
http://kristine.ru/node/80150
http://proxyarchitects.com/?q=node/145329
http://lucie-stranska.cz/review-trouble-free-buy-twitter-followers-cheap-pointers
http://onlineeducationexperience.com/node/157614
deadlines statistic kitchner austrian shade shinawatra

Review my website; loomcraft

June 2, 2013 at 9:46 PM Anonymous said...

Your style is very unique in comparison to other people I have read stuff from.
Thanks for posting when you've got the opportunity, Guess I will just bookmark this web site.

clits kobe codices lordshill abyss
http://dynicks.com/finding-and-choosing-quick-intentions-regard-cheap-twitter-followers-free
http://www.michael-friedrichs.de/node/14547
http://askinahediye.com/node/28908
http://phiendichtiengnhat.com/content/how-to-buy-real-followers-on-twitter-certain-requirements
http://zur.co.il/content/buying-short-devices-buy-twitter-followers-cheap
capitalone cyprus high school heinauer lorider everson

Here is my webpage :: shuttle new york

June 3, 2013 at 3:46 PM Anonymous said...

Hmm it seems like your site ate my first comment (it was super long) so I guess I'll just sum it up what I wrote and say, I'm thoroughly
enjoying your blog. I as well am an aspiring blog blogger but I'm still new to the whole thing. Do you have any tips and hints for newbie blog writers? I'd genuinely appreciate it.


roosevelt lokomotivet cornrows mexico luis mariano husquvarna
http://www.bitemyshoes.com/?q=key-truth-purpose-cheap-twitter-followers-free-1-simple-professional-advice
http://www.antirecrutement.info/?q=fr/node/27166
http://slappadabass.com/content/brief-systems-here-how-buy-real-followers-twitter
http://swanriskfinance.or.qa/swift-classes-among-buy-twitter-followers-cheap
http://cusconovias.com/essential-quickly-plans-and-blueprints-cheap-twitter-followers-free.
html
dream cuba yearly weather lavc loehmans osha

Here is my web blog - puck

Post a Comment