Html structure semantics for pages of data

Question

What's the best structure to use when designing a form/ details view for maximum readability (accessibility) and versatility?

As an example, the ASP.NET MVC framework's scaffolding creates a fieldset with a legend at the top and all fields in p's (a label and then the input/ editor set).

What's the most versatile structure to use, do you think?

For example, if I want to change the layout later to have two or three fields side-by-side instead of top-down, I'd only want to do that via CSS, as it's not structurally relevant.

Thanks,
Kieron

EDIT: A friends recommendation was to use dl, dt and dds...does anyone have any thoughts on that?

Answer 1

I use a very similar structure to the one generated by ASP.NET scaffolding, except that I use divs instead of ps:

<form>
    <fieldset>
        <legend>Legendary Fieldset</legend>
        <div>
            <label for="textBox">Text Input</label>
            <input name="textBox" id="textBox" />
        </div>
        <div>
            <label for="selectBox">Select box</label>
            <select name="selectBox" id="selectBox">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </fieldset>
    <!-- more fieldsets if required -->
</form>

I use divs because to me thats more semantically correct than p elements as they are intended for paragraphs of text.

When it comes to styling its also a versatile structure because you could for example make the fieldset 500px wide and the fieldset div 250px wide and floated, thus achieving side by side. Or you could have the same width for fieldset as the fieldset div. OR you could have the fieldset and fieldset div the same width and then stick a class on some divs (say "half") that are half the width and floated. The possibilities really are endless.

In any case this is just what I use for day to day stuff - though its versatile, it may not fit all requirements.

EDIT As far as definition lists are concerned, they are specialised elements that semantically should not be used to lay out a form.

Answer 2

I'd just create a basic form and let the structure grow around that.

<form>
  <input>
  <input>
  <input>
</form>

And then when you need groupings

<form>
  <div>
    <input>
    <input>
  </div>
  <input>
</form>

And then do all your presentation in CSS. The best way to test accessibility is to turn off all stylesheets and see if the site makes sense.

Forms are block level elements so they are semantically correct for containing other elements.