fabien7474 fabien7474 - 8 months ago 23
CSS Question

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

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 Source

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.