Why Use Definition Lists (Dl,Dd,Dt) Tags for HTML Forms Instead of Tables

Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?

I guess it's up to you to determine the semantics, but in my opinion:

Rather than a definition list, form-related properties should be used.

<form>
  <label for="fullname">Full Name:</label>
  <input type="text" name="fullname" id="fullname">
  <label for="email">Email Address:</label>
  <input type="text" name="email" id="email">
</form>

The "for" attribute in the <label> tag should reference the "id" attribute of a <input> tag. Note that when labels are associated with fields, clicking the label will put the associated field in focus.

You can also use tags like <fieldset> to cluster sections of a form together and <legend> to caption a fieldset.

Can I put anything inside DL/DT/DDs?

Updated answer based on comments:

This was originally answered in 2011 for HTML 4, but the answer is different for HTML5:

dt
Flow content, but with no header, footer, sectioning content, or heading content descendants.
dd
Flow content.

• dt element reference on W3C
• dd element reference on W3C

Original answer:

DT elements should contain inline content.

DD elements should contain block-level content.

Definition lists vary only slightly
from other types of lists in that list
items consist of two parts: a term and
a description. The term is given by
the DT element and is restricted to
inline content. The description is
given with a DD element that contains
block-level content.

Source: W3C

This question is also an interesting read: Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?

Is it bad design to use table tags when displaying forms in html?

Yes, it does apply for form layouts. Keep in mind that there are also tags like FIELDSET and LABEL which exist specifically for adding structure to a form, so it's not really a question of just using DIV. You should be able to markup a form with pretty minimal HTML, and let CSS do the rest of the work. E.g.:

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>

How to style dt and dd so they are on the same line?

dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0;
  padding: 0;
  margin: 0
}

<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

Which advantages have definition list (<dd><dt> etc..) and when we should use it?

All HTML tags look like XML. That's because both XML and HTML are closely related to SGML. XML is just a more generalized and "extensible" markup language than HTML.

And I would hardly say that XML is "not widely used", considering that XHTML, RSS, ATOM, RDF, EPUB, XMPP, Microformats, ODF, SOAP, etc. are all XML-based. It's far more popular in general use than YAML, JSON, or ini files—none of which are document markup languages in any case.

So the fact that HTML tags resemble XML is a really silly reason to avoid using a particular tag or set of tags. Markup should be chosen based on the semantic structure of your content, not the popularity of XML in the completely unrelated application of data serialization.

You use DL when you need to represent a definition list. That is, whenever you have something of the semantic structure:

term: definition
term: definition
term: definition
...

Strictly speaking, definition lists ought to be used only to define terms as in a glossary. But in practice, it's used for a lot more than that. Because HTML doesn't provide tags for specifying other types of pair relationships, DL is used as a catch-all in this area.

Aside from defining terms, DL is also used for dialog: the DT element holds the speaker's name, and DD holds the line spoken.

A form can also be represented as a definition list, but using the LABEL tag is more semantically correct IMO.

I usually use DL when I have to list a set of attributes and their values, e.g.:

File Name: Chloroform Girl.avi
File Size: 320 MiB
File Type: Video

HTML Forms - In your opinion, how should they be done and why? (<div> vs. <p>)

HTML is all about semantics. There is no reason username or submit should be inside a paragraph (<p>) because it's not a paragraph.

So I would go using <div> instead. Ok, maybe <div> has no meaning at all. But it's better than <p>.

Marking up ordered definition list

However as I need to be able to access each definition programmatically through Javascript I'm not sure that this would work.

Just get each definition term <dt> and then get the element next to it in the DOM tree, which should always be the definition description <dd>. jQuery is of great help in here. Here's an SSCCE, just copy'n'paste'n'run it:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2172138</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#dl dt').each(function(i, dt) {
                    dt = $(dt);
                    dds = dt.nextAll().map(function() { return $(this).is('dd') ? this : false; });
                    alert(dt.text() + " = " + dds.text());
                });
            });
        </script>
    </head>
    <body>
        <dl id="dl">
            <dt>Term1</dt><dd>Desc1a</dd><dd>Desc1b</dd>
            <dt>Term2</dt><dd>Desc2a</dd>
            <dt>Term3</dt><dd>Desc3a</dd><dd>Desc3b</dd>
        </dl>
    </body>
</html>

Does using unordered lists instead of tables make a lot of difference?

It sounds to me as if you are laying out a form ('text fields, labels and date pickers'), in which case you might be better using DIV, P, SPAN and LABEL tags to organize your controls, not TABLE tags or Lists.

As Oded says, it's not going to impact UI rendering much, but Tables are best kept for tabular data, and I would add that Lists, ordered or unordered, are best kept for, well, data in a list :)

If you are laying out form controls, I think this discussion may be more relevant to your decision: http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

At the risk of really starting a debate, my preferred layout for a line in an Asp.Net form is something like this:

<p class="form-line"> <!-- You could as well use a <div> -->
    <label>Field Name:</label>
    <asp:YOUR_CONTROL_HERE/>
    <asp:YOUR_VALIDATION_CONTROL_HERE/>
</p>

---

Related Topics