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

Question

I want to render a profile user container that contains a list of labels and their associated values.

Here is an excerpt of information and layout I'd like to display:

First Name.......MyName

Age...................MyAge

email................MyEmail

I know that there are tons of examples available but the problem is that it seems that there is no commonly accepted solution.

So far I have seen the following usage :

1. Table with markup (and < tr >,< td >...)
2. Unordered list with < ul > markup (and < li >, < div >...)
3. Regular markups with < h1 >,< h2 >...< p >
4. Definition List with < DL >, < DT > and < DD >
5. < label >...?

What is the most semantically correct? What is the easiest to display (in a 2-columns layout)? What do you advise me to use and for what reasons?

(html/css code snippets are more than welcomed)

Answer 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.