April 29, 2008

Divs, Lists or Tables for semantic forms in HTML

Well that’s a million dollar question. This has been debated on the net for quite sometime and I don’t think everyone has reached to a conclusion to settle on just one of them. A lot of people including me, used to use Divs.

e.g. <div class="fieldrow">

<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" />

I recently came across this article by Thomas Higgbotham in which he suggests using definition lists for marking up your form fields. On further exploration, I came across this article in clagnut, which exemplified the usage of definition lists for forms, now I am sold to the usage of definition list to markup your forms.

The above e.g. using definition list will be:

<dt><label for="firstName">First Name:</label></dt>
<dd><input type="text" name="firstName" id="firstName" /></dd>