Semantic Forms in HTML
December 12, 2007The primary purpose of the HTML language is to add meaning (AKA semantics) to your documents. This allows readers and programs to look at your text and understand its relevance. An h1 element tells us that its contents are a top-level heading, a p element tells us that we're reading a paragraph, and a table element lets us know that we're looking at tabular data—at least that's how it works in theory. One major piece of contention that I come across is how to semantically represent a form.
In the past, forms were almost always created by use of tables, the reason being that CSS didn't have major browser support, and the only way to style the form to the designer's liking was with a table. Those days are far behind us now, and the adoption of CSS now allows us to completely separate a document's meaning from its design. So… how should a form be marked-up?
Divs, Lists, or Just Stick with Tables?
There are numerous methods of marking up forms but I'm only going to cover the ones that have some credibility (marking up forms with paragraph elements or line breaks is not the way to go). Most commonly, I see forms marked up with divs, lists, and tables. Each have their merits as well as their cons.
Using div for Form Mark-up
Many, if not most, web standardistas will tell you that they use divs to separate form fields. Using divs makes sure that the form is still legible when CSS is disabled, and they provide enough “hooks” for styling the form, but I'll have to respectfully disagree on this one. Divs are great as far as design is concerned but my qualm is that it adds no meaning to the form whatsoever. A div, short for “division”, has no meaning except that its contents are separate from other divs. Why use a div when more semantic alternatives are available?
Are Forms an Example of Tabular Data?
I suppose if you are filling out a form about statistical data, a spreadsheet, or something similar, then a table would be the best choice. However, most of the forms that I see consist of simple questions and answers, and in these cases I disagree with the use of tables for form mark-up. A table does provide more “hooks” for styling forms (table, tbody, tr, and td to name some) but it has a very rigid structure. If you've ever needed to change the layout of a table-based form, then you are probably aware that they aren't very flexible.
What About Lists?
I would argue that a list adds the most semantic value to a form in most cases. After all, most forms are just a list of questions for you to answer, but which list should you use? There are unordered lists, ordered lists, and definition lists. Any choice is better than divs or tables as far as most forms are concerned but I think that definition lists add the most meaning. Consider a common contact form. It might consist of the following fields: Name, E-mail, Subject, and Message. Since definition lists are meant to represent terms and descriptions (see the W3C specification), they seem like the best fit for this kind of question and answer scenario. Lists also provide more styling possibilities than divs and are more flexible than tables.
So, What's the Answer?
In short, there is no concrete answer. For the most part, I would say that definition lists are the most suitable for the majority of web forms seen in blogs and content management systems but there are plenty of cases where a table is more appropriate. I really don't see how using divs is at all semantic but it is still much better than using an element that gives the wrong meaning.