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; }

More info on the <dl> tag available here.

Answer 2

This is a good question and is also one that is open to much debate becasue there is no fixed way of doing this.

there are arguments for many of them but me personally, I would keep it simple.

<div class="profile">
    <p>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </p>
    <p>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </p>
    <p>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </p>
</div>

or

<ul class="profile">
    <li>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </li>
    <li>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </li>
    <li>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </li>
</ul>

CSS would look something like this;

.profile p {
    overflow: hidden;
}

.profile .label {
    vertical-align: top;
    float: left;
    width: 40%;
}

.profile .value{
    vertical-align: top;
    float: left;
    width: 60%;
}

the reason for not referencing any specific html Node name in the CSS is that if in the future there is a recognised way of doing this you only have to change node names in your HTML.

Answer 3

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.