Question

I'm stuck in deciding which tag I should use to display a single data record in a webpage in HTML5, i.e. user details such as id, username, creation date, modification date and so on:

ID:             1234
Username:       JohnnyBeGoode
Birth:          23/12/1962
Country:        Iceland
Created:        01/01/2009
Modified:       27/04/2010

The problem is I cannot find a proper tag, coherent with the semantic aspects of this view:

  • table, tr and td tags are good for layout but semantically improper, since no tabular data is involved;
  • dl, dt and dd are used by some frameworks, but I find them semantically quite far;
  • list tags are not proper, since they're used with single values in each item, while I need to display a label and its related value;
  • label tag is to be used only in forms, according to W3C Schools website.

Then, which coherent and meaningful tags should I use?

Thanks in advance.

Was it helpful?

Solution

It’s not clear to me what you mean by "semantically quite far", but dl is the right element for this job:

The dl element represents an association list consisting of zero or more name-value groups (a description list).

[…]

Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

There is even an example in the spec very similar to your case (comment starts with "The following example shows the dl element used to give a set of instructions.")

Example:

<dl>
  <dt>ID</dt>
    <dd>1234</dd>
  <dt>Username</dt>
    <dd>JohnnyBeGoode</dd>
  <dt>Country</dt>
    <dd>Iceland</dd>
</dl>

If you want to provide further information about the content, you should have a look at RDFa (e.g. RDFa Lite 1.1) or Microdata. Looks to me like the vocabularies FOAF and/or SIOC could be used here.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top