What html markups to use for displaying label/value data?

Solution 1:

I think the most semantically correct would be <dl>, <dt> and <dd>, since what you're displaying are effectively definitions of first name, age and e-mail.

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>[email protected]</dd>
</dl>

However, obviously, the easiest way to display it in a table is using <table>, <th> and <td>. You could hack together a table-layout using definition lists using something like this:

dt { float: left; clear: left; width: 6em; font-weight: bold; }
dd { float: left; }

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>[email protected]</dd>
</dl>

More info on the <dl> tag available here.

Solution 2:

Wow. We really have scared everyone off with the “Table layouts are evil! Use CSS!” stuff, haven't we?

A table — with <th> for the labels and <td> for the values — is perfectly applicable to this kind of content, gives you the rendering you want, and is at least as semantically correct as a definition list, arguably more so. Either are preferable to semantics-free divs.

Solution 3:

I know this has been answered but I think definition lists can be perfectly appropriate.
I do agree with the bobince that tables are always appropriate for tabulated data...
However I have used this in a number of places where I preferred to avoid tables - and I don't think it is an incorrect method.

Definition lists:

<dl>
  <dt>Label</dt>
  <dd>Value</dd>

  <dt>Label 2</dt>
  <dd>Value 2</dd>
</dl>

With the CSS:

dl dt {
  float: left;
  width: 200px;
  text-align: right;
}

dt dd {
  margin-left: 215px;
}