Using dl for a Semantic Form

Wufoo’s login form

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.

Continue reading