Semantics and Structure of Name-Value Pairs

Question

This is a question I have been struggling with for a while. What is the proper way to mark up name/value pairs?

I'm fond of the <dl> element, but it presents a problem: There is no way to separate one pair from another - they have no unique container. Visually, the code lacks definition. Semantically, though, I think this is the correct markup.

<dl>     <dt>Name</dt>     <dd>Value</dd>     <dt>Name</dt>     <dd>Value</dd> </dl> 

In the above code, it is difficult to properly offset the pairs visually, both in code and rendered. If I wanted to, for instance, but a border around each pair, that would be a problem.

We may point to tables. It could be argued that name-value pairs are tabular data. That seems incorrect to me, but I see the argument. However, the HTML does not differentiate the name from the value, except in position, or with the addition of class names.

<table>     <tr>         <td>Name</td>         <td>Value</td>     </tr>     <tr>         <td>Name</td>         <td>Value</td>     </tr> </table> 

This makes much more sense from a visual standpoint, both in code and in CSS. Styling the aforementioned border is trivial. However, as mentioned above, the semantics are fuzzy at best.

Thoughts, comments, questions?

Edit/Update Perhaps this was something I should have explicitly mentioned in relation to structure, but a definition list also has the problem of not semantically grouping the pairs. The ordering and implicit border between a dd and a dt is easily understood, but they still feel slightly off to me.

Answer 1

Thanks for this interesting question. There are few more things to consider here.

What is a pair? Two elements together. So we need a tag for this. Let's say it is pair tag.

 <pair></pair> 

The pair contains the key, and the corresponding value:

 <pair><key>keyname</key><value>value</value></pair> 

Then, we need to list the pairs:

<pairlist>      <pair><key>keyname</key><value>value</value></pair>      <pair><key>keyname</key><value>value</value></pair> </pairlist> 

The next thing to consider, is the display of the pairs. The usual layout is the tabular one:

key value key value 

and the optional separator, which is usually colon:

key : value key : value 

The colons can be easily added via CSS, but this certainly won't work in IE.

Case described above is the ideal one. But there is no valid HTML markup to fit in this easily.

---

To sum up:

dl is semantically closest, for simple cases of key and value, but is hard to apply visual styles (eg. to display the pairs inline or to add red border to just hovered pair). The case which fits most for dl is glossary. But this is not the case we discuss.

The only alternative I can see in this case is to use table, like this:

<table summary="This are the key and value pairs">     <caption>Some notes about semantics</caption>     <thead class="aural if not needed">         <tr><th scope="col">keys</th><th scope="col">values</th></tr>     </thead>     <tbody class="group1">           <tr><th scope="row">key1</th><td>value1</td></tr>         <tr><th scope="row">key2</th><td>value2</td></tr>     </tbody>     <tbody class="group2">         <tr><th scope="row">key3</th><td>value3</td></tr>         <tr><th scope="row">key4</th><td>value4</td></tr>     </tbody> </table> 

One more:

<ul>   <li><strong>key</strong> value</li>   <li><strong>key</strong> value</li> </ul> 

or:

<ul>   <li><b>key</b> value</li>   <li><b>key</b> value</li> </ul> 

or, when the keys may be linked:

<ul>   <li><a href="/key1">key1</a> value</li>   <li><a href="/key2">key1</a> value</li> </ul> 

The key and value pairs are usually stored in database, and those usually store tabular data, so the table would fit best IMHO.

What do you think?

Answer 2

Following the specification (and further details) provided by Alexandr Antonov: use dl, dt, dd, and optionally div.

A combination of dl, dt, and dd is semantically fine for key-value pairs:

<dl>      <dt>Key1</dt>      <dd>Value1</dd>      <dt>Key2</dt>      <dd>Value2</dd>  </dl>

For easier styling or parsing, divs can be used as children of dl to group the key-value pairs (and makes dt and dd be grandchildren of dl):

dl { display: table; }  dl > div { display: table-row; }  dl > div > dt, dl > div > dd { display: table-cell; border: 1px solid black; padding: 0.25em; }  dl > div > dt { font-weight: bold; }

<dl>    <div>      <dt>Key1</dt>      <dd>Value1</dd>    </div>    <div>      <dt>Key2</dt>      <dd>Value2</dd>    </div>  </dl>