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)

Solution 1

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 2

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

Comments

[Kapil Gund]

Are you sure that it is the most semantically correct? according to what I have been reading, <dl> is used for definition/description pairs (for glossary for instance) which is not the same as label/value pairs.

[Dominic Rodger]

I suppose it depends what your definition of "definition" is. For example, in the context of me, my first name is defined to be "Dominic". Whether you think that is a valid use of the word "define[d]" or not is somewhat subjective.

[Arve Systad]

A bad solution in my opinion. You never define anywhere - semantically - that the labels are labels, which are connected to the values. For anything else than a normal web browser (screen readers, mobile devices etc) the text in each paragraph would just look like "First Name Myname", "Age Myage" etc. - which is just not very readable.

[Arve Systad]

According to the spec (w3.org/TR/html4/struct/lists.html#h-10.3), DL can be used to more than "definitions". The list type is intended for use as a list of key-value-pair (or multiple values) type of list.

[Kapil Gund]

This article (benmeadowcroft.com/webdev/articles/definition-lists.shtml) gives examples of <dl> usage using only terms/descriptions pairs. It says "definition lists are important because they provide a context for the text with which they are associated". Clearly, you define a term once and that's all. For instance, this is a genuine usage: <dt>CSS</dt> and <dd>Cascade Style Sheet</dd> because the value side of "CSS" is not supposed to change for each user contrary to the label "First Name"

[dnagirl]

So true! Really, if your data is tabular, put it in a table. That's what they're for.

[Mike Crittenden]

Try to avoid using the p tag for things that aren't really paragraphs.

[John Polling]

This isn't semantically correct. P tags are for paragraphs and there is no definition of what is a label and what is a value

[John Polling]

It could be argued that this isn't a table of data, but a list of labels and values. If there were more values then it would definitely be a table

[Kapil Gund]

Maybe it is not the correct answer. However it is a widespread usage AND it should not be downvoted ! Downvote is usually ofr answers that are out-of-scope or totally wrong !

[Kapil Gund]

In my situation, there is indeed more values. But I don't understand your comment. According to you, with few items, this is a list of labels/values but when the number of items is over a certain threshold, it becomes a table???? Do you limit your usage of unordered list (<ul>) according to the number of items?

[John Polling]

Widespead usage does not make answers correct. A while ago table based layout had widespread usage, that didn't make it correct. I'm sorry, but this markup is totally wrong.

[John Polling]

I'll try to clear up the confusion. When there are more values...e.g. First Name.....MyName, AnotherName, etc (e.g. rows of data) then it is a table of data. The code above is clearly just a list of labels / values.

[CRUTER]

Maybe then a UL is semantically better, I have added the case. I don't believe that a DL is correct, but I would accept a table with TH used for the labels. As far as I know the LABEL element is for associating text with form elements and is part of the W3C form spec?

[Kapil Gund]

I also believe that the DL is not correct according to the different articles/examples I have read so far. Your second solution seems acceptable. What do other folks here think ?

[Kapil Gund]

@John. Again, 3 items of label/value pair or 100, what is the difference? I have understood your point but I don't think that it is logical to treat data differently if you have either 3/4 items or 10 items. Or maybe, in both case, you would have used a <table> but naming the data differently?

[Kapil Gund]

@John. I do not discuss the fact that the answer might be wrong (maybe better with the new edit?) but why people downvoting this answer ? Anyway, I might be wrong because I have found this (meta.stackexchange.com/questions/21080/…) that basically explain that we should not be so afraid of downvoting. But personally, I downvote only when the answer is inappropriate

[John Polling]

@fabien. I think you have missed my point. I'm trying to say when a label has multiple values then you should be using a table. In this case where the label/value is a one-to-one relationship then really a dl is more appropriate. Even if the list was a 100 items long.

[Chris]

Both a table and a definition-list would be fine here; it's largely a matter of taste. Some three-column tables could also be presented as a definition-list with two dd elements per dt element, and indeed there are examples like this in the HTML specifications. The rule I usually go by is that I use a definition-list if the number of definitions per term is varied - for example, some words in a dictionary will have multiple meanings, so a definition-list is appropriate. In fabien's case, I'd use a table if the data was as shown, but if a user could have two email addresses I'd use a list.

[Kapil Gund]

@John. I got your point and I agree with you. @Chris. That is a good rule of thumb that I will try to apply. Thx.

[Eric Bock]

<dl> has been rebranded as a description list in the latest html5 spec. It seems to clarify that name / value pairs are appropriate.

[Carrie]

This was useful to me. I believe there's a typo. The CSS should be: dl dt {...} and dl dd {...}

[cstrat]

fixed the typo :)

[Toskan]

yes, tables are almost always a bad idea, and this is no exception imho. Just add another field, say message that can contain a text with 255 length. Now it should be responsive as well. Where does your table go now? yes, out the door.