以下のような、よくある横並びのフォームですが、どのようにマークアップするのがいいのか迷います。

今まではよく定義リスト(dl)を使ってマークアップしていまたのですが、他にもいろいろなマークアップがありそうなので書き出して見ました。

labelをうまく使えば余計なタグを入れなくてすみます。今回はposition:absoluteで横並びを実現してます（tableを除く）が、floatを使う方法もあります。僕はもっぱらposition派。

リスト(ul,ol)

シンプルで、構造の意味的にもしっくりきます。順序付きリスト(ol)か順序無しリスト(ul)にするかはケースバイケースです。

DEMO

<ul id="formItems_1">
  <li><label for="commentAuthor_1">名前</label><input type="text" name="author" value="" id="commentAuthor_1" /></li>
  <li><label for="commentEmail_1">Email</label><input type="text" name="email" value="" id="commentEmail_1" /></li>
</ul>

ul#formItems_1 {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul#formItems_1 li {
  padding: 3px 0;
}

ul#formItems_1 li label {
  position: absolute;
}

ul#formItems_1 li input {
  margin-left: 5em;
}

定義リスト(dl)

よく見かける気がするマークアップです。

DEMO

<dl id="formItems_2">
  <dt><label for="commentAuthor_2">名前</label></dt>
  <dd><input type="text" name="author" value="" id="commentAuthor_2" /></dd>
  <dt><label for="commentEmail_2">Email</label></dt>
  <dd><input type="text" name="email" value="" id="commentEmail_2" /></dd>
</dl>

dl#formItems_2 {
  position: relative;
  margin: 0;
  padding: 0;
}

dl#formItems_2 dt {
  position: absolute;
  padding: 3px 0;
  margin: 0;
  width: 5em;
}

dl#formItems_2 dd {
  padding: 3px 0 3px 5em;
  margin: 0;
}

段落(p)

一番シンプルです。

DEMO

<div id="formItems_3">
  <p><label for="commentAuthor_3">名前</label><input type="text" name="author" value="" id="commentAuthor_3" /></p>
  <p><label for="commentEmail_3">Email</label><input type="text" name="email" value="" id="commentEmail_3" /></p>
</div>

div#formItems_3 {
  position: relative;
}

div#formItems_3 p {
  padding: 3px 0;
  margin: 0;
}

div#formItems_3 p label {
  position: absolute;
}

div#formItems_3 p input {
  margin-left: 5em;
}

表(table)

意味的に間違ってないと思うので、tableでのマークアップも最近結構使います。o

DEMO

<table summary="応募フォーム" id="formItems_4">
  <tr>
    <th scope="row"><label for="commentAuthor_4">名前</label></th>
    <td><input type="text" name="author" value="" id="commentAuthor_4" /></td>
  </tr>
  <tr>
    <th scope="row"><label for="commentEmail_4">Email</label></th>
    <td><input type="text" name="email" value="" id="commentEmail_4" /></td>
  </tr>
</table>

table#formItems_4 th {
  background: #FFF;
  text-align: left;
  color: #000;
  font-weight: normal;
  width: 5em;
}

table#formItems_4 td,
table#formItems_4 th {
  padding: 5px 0;
  border: none;
}

他にもありそうだけど、とりあえず思いつくだけ並べてみました。