Semantics in forms are one of the things that needs to be talked about, in my opinion, since they are one of the most important parts of a web site. You create/edit user accounts, create/edit blog posts, submit a comment, gather information from your audience, and lots more through them. However, apart from fieldset, we don’t really have a semantic way of marking up a pair of form elements.

There are different ways in marking up one’s form: div, p, ul or ol and dl. Because using dl, or definition list, to mark up a form is still unusual even though it’s not exactly a new idea, I will be talking and boring you, unfortunate people, about it here.

Understanding the dl element

dl is one of the most overlooked element in HTML since, I assume, people mostly associate it with just definition lists, aka glossary. But it can be much, much more as was shown by Mike Robinson in his article about the dl element in HTML5 Doctor. The HTML5 draft describes definition list as:

The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements).

HTML5 Working Draft: The dl element

The key to why dl is the mark up that makes most sense (at least to me) is the name-value groups phrase. Form elements are all about pairing as you have the label which is the name and the corresponding value which is the input or textarea or select.

Using dl, your code is going to look something like this:

<form action="">
  <dl>
    <dt><label for="input-value">Label Name</label></dt>
    <dd><input type="text" name="input-value" id="input-value" size="32" /></dd>
  </dl>
</form>

Pros

Aside from your code being semantic, using definition lists for forms will enable you to have a correctly styled form element by default since both dt (definition term aka term) and dd (definition aka value) are block elements. dl also lets you mark checkboxes up with more sense like so:

<dt>Select one or more option:</dt>
<dd>
  <label>
    <input type="checkbox" name="value-1" id="value-1" />
  </label>
</dd>
<dd>
  <label>
    <input type="checkbox" name="value-2" id="value-2" />
  </label>
</dd>
<dd>
  <label>
    <input type="checkbox" name="value-3" id="value-3" />
  </label>
</dd>

I have to admit that I’m stumped checkboxes and radio boxes. There are times when it makes sense to put the option heading in a legend, but you can’t always put them in a separate fieldset! Using a heading element makes even less sense. Most of the time, I just use label even though it’s not really linked to anything. Well, p works, too.

Cons

Like everything else, using dl isn’t really foolproof:

• dt and dd are separate elements which makes it harder for you to clear them in case you’ve decided to float them and have multiple values. This scenario is easier for div, li and p because they act as a wrapper to the label-input pair. You can fix this by clearing your dt.
• You’ll encounter a version of the above mentioned problem when you have an empty value in a pair. You can either put a space (&nbsp ;) or min-height. I’m thinking that min-height is the better solution between the two, though.
• An IE 6 problem: when you add a block element within dl and its child elements, IE6 escapes the definition list so that the block element is outside it. There’s still a workaround like, instead of p, you can use span instead, which sort of defeats the purpose of what we’re trying to do. Ken, a co-worker of mine assured me that that problem doesn’t exist in IE 7, which is a sigh of relief.

Personally, I think the pros outweighs the various CSS issues you might encounter in the process. Nothing makes you feel better than being able to solve a CSS problem, which is probably why I miss IE 6 sometimes (isn’t that sad?). :(

How do you mark up your form? Do you think you’ll try and switch to dl one of these days?