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

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

Many past web designers would love to create web design using table and it has been the Achilles point for web developers when it comes to debugging. Now, however when it come to listing data on a web page, example listing data of a profile, many people would use a HTML table instead.

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.

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

[tut demo=”http://www.onextrapixel.com/examples/dl-tags-vs-table/” download=”http://www.onextrapixel.com/examples/css-rollover-display-element/css-rollover-display-element.zip”]

Using HTML DL, DT, DD Tags

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.

DL, DT, DD Tags vs Table

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.

[tut demo=”http://www.onextrapixel.com/examples/dl-tags-vs-table/” download=”http://www.onextrapixel.com/examples/css-rollover-display-element/css-rollover-display-element.zip”]

Conclusion

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.

Comments

  1. / Reply

    Rather than using td.title I think it would be more appropriate to use a th element. It eliminates the need for the .title class (as well as the “text” class) and actually makes more sense.

    Name:
    John Don

    Wouldn’t you agree?

      • Terrance,
      • July 8, 2009
      / Reply

      Hi Zack,

      Yes you are right.

      But even if you use “th” element, it is still not as semantic as using definition list.

      Thank for sharing. :)

        • Mitch,
        • June 22, 2011
        / Reply

        I don’t think I understand what you mean when you call the use of ‘s as being more “semantic” than a table.

        I’m also confused as to what makes a table less sleek or more bulky. It seems to me that if you use instead of a title class then Zack is right. Could you specify what makes the method cleaner or better?

          • Mitch,
          • June 22, 2011
          / Reply

          My comment was formatted oddly. What it should have said was:

          I don’t think I understand what you mean when you call the use of “DL”s as being more “semantic” than tables.

          I’m also confused as to what makes a table less sleek or more bulky. It seems to me that if you use “TH”s instead of a title class then Zack is right. Could you specify what makes the method cleaner or better?

        1. / Reply

          mitch — tables should only be used for tabular data, not layout. thats whats meant. using a list for what is a list (of fields) being laid out makes more semantic sense from the HTML point of view.

      • anon_web_dev,
      • May 19, 2012
      / Reply

      Agreed. That is definitely more semantic and simplifies the markup.

  2. / Reply

    Hi Terrance,
    Awesome tutorial and explanation. Thanks a lot. Keep doing the good work.

    With Regards,
    Sagar S. Ranpise

    • Tom,
    • October 1, 2009
    / Reply

    Hi,

    I have a small problem with the DL-way:

    when I tell the dl to have a “width: 50%”, I get this result: http://img19.imageshack.us/img19/9537/ss20091001104849.png

    Can you help me with more css?

      • Terrance,
      • October 1, 2009
      / Reply

      Hi Tom,

      Change width:50%; to pixel (px). If you want to keep it fluid with width:50%;, then add padding-left to your dl dd.

      hope this helps!

      • Zubair Ahmad,
      • November 9, 2009
      / Reply

      Hello Tom,

      You can simple use this in css and may be sure that you will solve your problem

      dl {margin:0; padding:0;}
      dl dt{font-weight:bold; float:left;}
      dl dd{margin:0 0 2px 90px; padding:0;}

      • Zubair Ahmad,
      • November 9, 2009
      / Reply

      If you want to change width then you can do and if you want to use same width in % or in pix, it is working with both.

    • Cristian,
    • November 19, 2009
    / Reply

    There are problems with dt, dd.

    In case the height of the content within dt is higher than of the content within dd, the dd is not resizing automatically to have the same height… This leads to lot of problems…

  3. / Reply

    Thanks for the information. That would really help clear a lot of doubts for a whole lot of people. It is always better to use more efficient code for better efficiency. Looking at it differently, this could also save the environment as better efficiency means more productivity using lesser resources. Now that is green coding. Our green news features many ways to use computers to save the environment.

    • San,
    • December 28, 2009
    / Reply

    How to make third column using this technique.

    • Tom,
    • January 23, 2010
    / Reply

    What can one do, if a is somewhat longer and goes over two lines? In your css the float breaks the whole layout. Is there a solutions using these tags?

  4. / Reply

    The one that continues using tables is because it does not dominate or does not know CSS. To design in CSS is far better, by the subject of order, maintenance, accessibility, navigability and thousand reasons more.

  5. / Reply

    Use the th-Element for Head-Elements in the table and you will have the same. A table ist better to handle as the dt and dd, if you want to define absolute widths for it. I used at the Beginning the dt and dd-Elemnts by my Projekt and after many annoyed days i started to use tables. They are much better to handle and have saved me a lot of time.

    just my opinion.

      • Kevin,
      • June 5, 2010
      / Reply

      Using tables in 2010 for anything other than very complex tabular data (which is what tables were originally meant for anyway) is like keeping a leisure suit from the 70’s on the basis that it still fits you. Just because you can, doesn’t mean you should. Good luck – maybe we’ll see you on page 499 of 500. :-)

  6. / Reply

    Nice article, thought I’d just add my two cents to help the dd forms a little more obvious semantically.

    Field 1:

    I do still use table in my designs, although quite sparingly, they do have their uses still, particularly regarding backwards compatability.

    1. / Reply

      ahh, looks like the html is encoded into the post, d’oh!

    • ppunsensor,
    • August 19, 2010
    / Reply

    Greet Article, I’m looking for dl, dt, dd.

    • Ming,
    • August 24, 2010
    / Reply

    When I first saw people using it this way I was like Wow!
    Then I read http://www.w3.org/TR/html401/struct/lists.html#h-10.3

    Please correct me if I’m wrong. I think the purpose of DL, DT, DD is for definition (just my personal understanding from the documentation).

    I would generally use the below instead because these tags seem to be designed particularly for this purpose.
    – To display data – use label-span pair
    – To input data – use label-input pair
    And I apply the same style you use for DT to label.

    Thanks for sharing.

    • Cliff Tyllick,
    • September 9, 2010
    / Reply

    @Ming, one thing upsets me about your comment: That it took 15 months before someone reading this page pointed it out! You are absolutely right — this is an inappropriate use of DL, DT, and DD.

    DL should mark a list of definitions — a glossary, for example.

    DT marks a term to be defined, not a label for a field.

    DD marks the definition of that term, not a data field.

    As you point out, CSS is the tool to use to control the appearance of text. The html tags are to be used to label the semantic structure of each item. The take-home lesson is to learn the purpose of each tool in the kit provided through the W3C and then to use a tool for its intended purpose.

    Lighter code is still junk code if it’s semantically incorrect.

      • vin,
      • April 13, 2011
      / Reply

      +1

    • Adedoyin Kassem,
    • September 30, 2010
    / Reply

    Nice tutorial you have posted here but your CSS rules for the and tags have not put one thing into consideration.
    Assume that your s all have one line as your example here has clealy show but one or two tags contain contents that span across two lines, what would happen then? There would be a distortion of the total structure.

    Now don’t get me twisted, i don’t use tables for my layouts (only when necessary) but your execution of this stylesheet isn’t carefully thought about.

    • Neil,
    • November 18, 2010
    / Reply

    Be sure to add “clear:both;” in the css to make sure each row always lines up regardless of the height.

    dl dt {
    float:left;
    clear:both;
    width:100px;
    }
    dl dd {
    float:left;
    }

  7. / Reply

    Wow, that was incredibly helpful. I have been making websites and this will look much nicer and be way easier to implement. Thank you for the really helpful guide, your blog is really awesome!

    • Luiz,
    • January 28, 2011
    / Reply

    I’m with Cliff Tyllick, this isn’t a correct use of DL,DT and DD.

    They should contain terms and their definitions. “Luiz” isn’t the definition of “Name”, for example.

    I believe the table approach would be more semantically correct.

    1. / Reply

      how would you responsively style a Table on a smaller device, say a mobile phone? with DL/DT/DD i can load a different definition on it to fit the screen with one line at a time.

    • Lenny,
    • May 25, 2011
    / Reply

    Will using dl and dt effect google seo?

      • Cliff Tyllick,
      • June 12, 2011
      / Reply

      @Lenny, I can’t imagine how using dl/dd/dt as opposed to a tabular layout would have any effect whatsoever on SEO.

      The most important factors for SEO that are under the author’s control are the words in these places:

      The Web page’s URL
      Links pointing to it from elsewhere on the same website
      Its title tag
      Its properly tagged headings
      To a much lesser degree, its contents

      Two other very important factors that are usually not under the author’s control are the words in links pointing to the Web page from other websites and the perceived authority of those other websites.

      But the markup of data tables and lists? You want to do it right for a lot of reasons, but SEO isn’t one of them.

  8. / Reply

    Nice….
    I Want try. Thx 4 share….

    • onebyelove,
    • June 8, 2011
    / Reply

    trhrthrt

    • charly,
    • June 26, 2011
    / Reply

    Being still new at WEB Dev, I’m just finding out about DL/DT/DD. And reading about the benefits of good semantics (so encouraged by HTML5 by the way), I’m starting to understand more things, it’s like the second level of understanding after initially using CSS. This would really make it good for two-column presentation (using it a lot in a business app now with lots of CRUD single-record screens) as I could style this kind of view separately from other table views (like multi column table queries). Thanks!!

    • anna,
    • October 5, 2011
    / Reply

    i make html designs for 5 years and dl is 100% better than table.

      • John,
      • June 6, 2017
      / Reply

      Do you still have the same opinion now you’ve been developing for over 10 years? I seriously doubt it.

    • gabriel,
    • October 26, 2011
    / Reply

    to anyone claiming this is better than table… care to explain how you make variable lengths of text all aligned?

    with TDs the rows will be aligned just fine. with DTs you have to fix one width and live with it for the entire site.

      • leon,
      • January 31, 2012
      / Reply

      yes, depending on how many columns you have you use a %. for eg if you have 2 columns you put

      dl dt
      {
      width: 50%;
      }

      • huh,
      • April 26, 2012
      / Reply

      they wont. there is a knee-jerk, stupid conditioning against tables in the ‘web 2.0’ crowd, and those conditioned by that.

      people who do not actually work in the trenches of for-production development – people who had not have to fix ‘trendy new, web 2.0 fluid design sites’ divs fly all around the place when loaded in a random mobile or uncommon browser on random mobile or uncommon platform.

      its all good and dandy when you are doing simple, trendy web pages with few elements within it – but the moment you have to do a serious ecommerce or publishing site, all the nifty new elements and their positions get shafted at the point where a random browser/platform combo places one element slightly differently. (and many do).

      tables, on the other hand, stay where you put it, in all platforms, browsers even including ancient generations, without you having to define endless numbers of absolute positioning in your css. (Which totally invalidates the benefit of using these new elements too)

        • Yep,
        • October 24, 2012
        / Reply

        I’ve been developing for over a decade and I’m always looking for the best practices. I’d love to ditch tables for layout, however I agree that for anything very complex that requires supporting multiple devices/browsers you can only get reliable performance with tables!

    • jatinpatel,
    • February 1, 2012
    / Reply

    very good

    • weaselspleen,
    • March 2, 2012
    / Reply

    Claiming that this usage of DL is semantically incorrect is pure nonsense.

    Here’s a direct quote from http://www.w3.org/TR/html401/struct/lists.html#h-10.3

    “Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.”

    In other words, on the very same page that was used as a criticism of this technique, the W3C provides aan example of this structure being used for something other than dictionary definitions. Claiming that any other use is semantically invalid is just pointless nitpicking.

    There’s absolutely no reason not to use DL/DT/DD just because DL stands for definition list. That’s like saying you can’t use unless it’s an actual paragraph of text, or you can’t use unless it’s a comment about steroids.

    • mhan,
    • March 9, 2012
    / Reply

    HTML5 loosened the content types for DL, DT, DD: http://www.w3.org/TR/html5/grouping-content.html#the-dl-element

    • Andrew,
    • March 16, 2012
    / Reply

    There is a consideration for those of us working with CMSs (where the exact content between the dd tags is not known)… if the dd element has a calculated width (it is either a percentage or not set) and the text and other inline contents of the dd tag exceed the calculated width of the dd element, then, rather than wrap the text, it will first push the dd element into a new line below its corresponding dt content.

    Often this is not desirable. And this is different behaviour than a table cell.

    So you want to be cautious using dl/dt/dd when you don’t know what the content will be, and you are working with fluid-width, and having some matching dt-dd pairs on separate lines, while most are on same lines is an unacceptable look for you. A table, or divs, are better options in that case.

    • huh,
    • April 26, 2012
    / Reply

    code is LESSER, SLEEKER ? you have individually identified classes for the table cells, but you have lump-defined dd dt elements.

    if you have also lump-defined entire property for table elements for entirety of the document in one shot like you did for dd elements, the codes would be practically identical.

    and that is despite the fact that in the current case there are more lines in your css for dd elements.

    • Oleg,
    • May 17, 2012
    / Reply

    Thanks man!

    • Mithilesh Yadav Azamgarh,
    • May 26, 2012
    / Reply

    Hi..
    Sir
    I have a small Problem I want 2 use Listing in html when we go on Html Button then After list Open Automatically
    Pls give me solution

    • dan,
    • September 19, 2012
    / Reply

    So, have you tested what happens when you put a very long name in the demos?
    The table looks good, the dl looks like crap.

    Adding this to the fact that th could have been used to simplify table code, leaving only the “tr”s as the extra code, I ask the author:

    Is there really an advantage in using dl, dt & dd?

    Is there a way to make it behave like a table in the given example of the long name?

      • mikedidthis,
      • July 12, 2013
      / Reply

      You could use display:table / display: table-cell. The issue sadly arises that the dt / dd element needs another element to create a table-row, thus making everything a mess.

    • Percy,
    • October 14, 2012
    / Reply

    According to the saying “make life easier”, it’s time to change

    • Leonel,
    • November 11, 2012
    / Reply

    Thanks really simple

  9. / Reply

    Sure, this work’s fine for two-column lists, but it’s no neater than a table, and the dl, dd, dt tags are less flexible.

      • Jindřich Sládek,
      • March 24, 2013
      / Reply

      Really? Can you float table cells? You can simply float dl so you can make more columns if you use multiple dl.

      • Stephan Wessels,
      • April 17, 2013
      / Reply

      I would not recommend you as a developer to anyone

    • G8FXM,
    • August 8, 2013
    / Reply

    Thanks for sharing.

    • Aaron Davidson,
    • September 1, 2013
    / Reply

    For a responsive two column table this works really well if you use additional CSS as in some of the other comments. Having spent years in the 90s and early 2000s building sites using tables because that was the only way I coudn’t give a s**t about semantics if something works quickly, easily and cross-browser responsively

    1. / Reply

      true. and for multiple columns i believe the DL/DT/DD approach fails.

    • John,
    • June 6, 2017
    / Reply

    This is all well and good but unfortunately if you want to write semantically beautiful code, be willing to sacrifice accessibility – a legal requirement for web applications. Run a screen-reader over a definition list and you will soon learn why they shouldn’t be used. A better solution is to use an un-ordered list with floated elements and aria labels. This is not only semantically logical but also makes perfect sense.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.