Breadcrumbs

Best Markup for Semantic HTML Forms?

When I code a webpage, I always fret about making sure that my markup is as semantic and simple as possible. Generally, creating a semantic webpage is easy, but I have always found coding semantic HTML forms to be difficult. In the web development world, there are a few excepted formats for semantic HTML forms: tables, <div>'s, paragraphs, ordered lists, and definition lists. The challenge is that each form has its own pros and cons in relation to semantics.

Foremost, the <div> element simply provides no semantic clarity for forms and I highly recommend never to use it for form organisation. Tables make a logical choice for forms because many forms are organised in a tabular fashion, particularly more complex forms. Paragraphs also make semantic sense as each label and form element pair is much like a paragraph. Ordered lists present even more semantic clarity because most forms are organised much like a list, with a very vertical setup. Many web developers argue that forms are simply a "list" of things to fill out. However, many other web developers passionate about semantics argue that definition lists make the most sense for forms (external link) because they fit the "question and answer scenario".

This past week, I spent some time designing a personal portfolio website to exhibit some of my web-related work. I wanted everything to be as semantic as possible, in addition to using valid code, to show my commitment to a better web. So, I decided to use definition lists for my email contact form. I am convinced now that definition lists are the most semantic way to organise form fields in most situations. Also, definition lists surprisingly styled easily across Opera, IE, Firefox, and Safari.

Code: XHTML

<h3 id="contact">Contact Me</h3>
<form action="./contact" method="post" id="contact_form">
    <dl>
        <dt><label for="f_name">Name:</label></dt>
        <dd><input type="text" name="name" id="f_name" /></dd>
        
        <dt><label for="f_email">Email:</label></dt>
        <dd><input type="text" name="email" id="f_email" /></dd>
        
        <dt><label for="f_topic">I am interested in:</label></dt>
        <dd>
            <select name="topic" id="f_topic">
                <option>Web development</option>
                <option>Custom application development</option>
                <option>Translation</option>
                <option>Writing/Proofreading</option>
                <option>Other</option>
            </select>
        </dd>
        
        <dt><label for="f_message">Message:</label></dt>
        <dd><textarea name="message" id="f_message" rows="10" cols="40"></textarea></dd>
    </dl>
    <p class="submit"><input type="submit" value="Send" /></p>
</form>

Still, in scenarios with more complex forms, I think that tables provide more clarity and concrete physical organisation. For example, government forms are generally simply too complex for a simple definition list. In these situations, tables provide semantic clarity and guaranteed physical organisation that will work better across each web browser. In the end, I would say that definition lists and tables are the two best methods to organise form fields semantically.