Semantics and structure of nominal value pairs

Question

This is a question I struggled with for a while. What is the correct way to mark name / value pairs?

I love the <dl> element, but it presents a problem: there is no way to separate one pair from another - they do not have a unique container. Visually, the code has no definition. Semantically, however, I believe that 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 correctly compensate for the pairs visually, both in the code and in the rendering. If, for example, I wanted to create a border around each pair, that would be a problem.

We can point to tables. It can be argued that name-value pairs are tabular data. This seems wrong to me, but I see an argument. However, HTML does not distinguish a name from a 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 more sense from a visual point of view, both in code and in CSS. The styling of the above boundary is trivial. However, as mentioned above, semantics are fuzzy at best.

Thoughts, comments, questions?

Edit / Update Perhaps this was what I should have explicitly indicated with respect to the structure, but the definition list also has a problem of non-semantic grouping of pairs. The reference and implicit boundary between a dd and a dt easy to understand, but they are still slightly disconnected from me.

Answer 1

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

What is a couple? Two elements together. Therefore, for this we need a tag. Let's say this is a 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 specify 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 mapping of pairs. The usual layout is tabular:

 key value key value 

and an optional separator, which usually has a colon:

 key : value key : value 

Colons can be easily added via CSS, but this will certainly not work in IE.

The case described above is ideal. But there is no valid HTML markup to fit in easily.

---

Summarizing:

dl is semantically close, for simple cases of key and value, but it is difficult to apply visual styles (for example, to display inline pairs or add a red border only to a pair with a pair). The most suitable for dl is the glossary. But this is not the case that we are discussing.

The only alternative I see in this case is to use table , for example:

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

Another:

 <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, if keys can be associated:

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

A pair of keys and values ​​is usually stored in a database, and they usually store tabular data, so the table will match the best IMHO.

What do you think?

Answer 2

XHTML 2 introduces the ability to group terms and definitions using the di element

 <!-- Do not us this code! --> <dl> <di> <dt>Name</dt> <dd>John</dd> </di> <di> <dt>Age</dt> <dd>25</dd> </di> </dl> 

X / HTML 5 vs XHTML 2> Expanding Definition Lists

unfortunatly XHTML 2 is dead, but HTML5 has no di element

So you can combine ul > li with dl > dt + dd :

 <ul> <li> <dl> <dt>Name</dt> <dd>John</dt> </dl> </li> <li> <dl> <dt>Age</dt> <dd>25</dt> </dl> </li> </ul> 

Answer 3

I think the list of definitions is probably a bad idea. Semantically, they are used for definitions. Other lists of key values ​​often differ from the names and descriptions of definitions.

A table is one way, but what about an unordered list?

 <ul> <li class="key-value-pair"> <span class="key">foo</span> <span class="value">bar</span> </li> </ul> 

Answer 4

This is not my preferred solution, but it is a clever abuse of the semantic element:

Use the new <dl> per <dt> / <dd> pair:

 <div class="terms"> <dl><dt>Name 1</dt><dd>Value 1</dd></dl> <dl><dt>Name 2</dt><dd>Value 2</dd></dl> </div> 

Example with float css and red border on hover:

 dt:after { content:":"; } dt, dd { float: left; } dd { margin-left: 5px } dl { float: left; margin-left: 20px; border: 1px dashed transparent; } dl:hover { border-color: red; } 

 <div class="terms"> <dl> <dt>Name 1</dt> <dd>Value 1</dd> </dl><!-- etc --> <dl><dt>Name 2</dt><dd>Value 2</dd></dl> <dl><dt>Name 3</dt><dd>Value 3</dd></dl> <dl><dt>Name 4</dt><dd>Value 4</dd></dl> <dl><dt>Name 5</dt><dd>Value 5</dd></dl> <dl><dt>Name 6</dt><dd>Value 6</dd></dl> </div> 

Answer 5

Hm. dt / dd best suited for this, and you can visually compensate for them, although I agree with this more difficult than for the table.

As for readability of the source code, how about entering them on a single line?

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

I agree that is not 100% excellent, but I see how you can use spaces for indentation:

 <dl> <dt>Property with a looooooooooong name</dt> <dd>Value</dd> <dt>Property with a shrt name</dt> <dd>Value</dd> </dl> 

this may be the most enjoyable way.

Answer 6

it is difficult to correctly compensate for pairs visually, both in code and in rendering. If, for example, I wanted to create a border around each pair, that would be a problem.

The rest in front of me figured out (pretty well, I think) with the problem of providing a visual definition in the code. Which leaves the problem of rendering and CSS. In most cases, this can be done quite effectively. The biggest exception is placing a border around each dt / dds set, which is admittedly extremely difficult - perhaps impossible to style reliably.

You can do:

 dt,dd{ border:solid; } dt{ margin:10px 0 0 0; border-width:1px 1px 0 1px; } dd{ margin:0 0 10px 0; border-width:0 1px 1px 1px; padding:0 0 0 10px; } dd::before{ content:'→ '; } 

Which works for PAIRS key values, but presents problems if you have several dds in one "set", for example:

 <dt>Key1</dt> <dd>Val1.1</dd> <dd>Val1.2</dd> <dt>Key2</dt> <dd>Val2.1</dd> <dd>Val2.2</dd> 

However, restrictions on the border style aside, which does something else to combine the sets (backgrounds, numbering, etc.), are entirely possible with CSS. Here's a good review: http://www.maxdesign.com.au/articles/definition/

---

Another point that I think about is worth noting if you are looking for the best style for defining lists to provide visual separation - the CSS auto-numbering functions ( counter-increment and counter-reset ) can be very useful: http: //www.w3. org / TR / CSS2 / generate.html # counters

Answer 7

With the exception of the <dl> element, you pretty much summarized all the HTML options: limited.

However, you are not lost, one option remains: using a markup language that can be translated into HTML. A very good option is Markdown.

Using a table extension that some markup mechanisms provide, you can have code like this:

 | Table header 1 | Table header 2 | ----------------------------------- | some key | some value | | another key | another value | 

This means that you need a build step to, of course, translate Markdown into HTML.

This way you get meaningful markup (table for tabular data) and supported code.

Answer 8

Of course, you can just use HTML custom elements . ( spec ) They are fully HTML5 compliant.

Unfortunately, browser support is not so big, but if we rarely care about such pedestrian things as browser support, when we deal with semantics. :-)

One way you could imagine this:

After registering your new fashion item, for example:

 var XKey = document.registerElement('x-key'); document.body.appendChild(new XKey()); 

You write the markup as follows:

 <ul> <li> <x-key>Name</x-key> Value </li> </ul> 

The only condition that HTML user elements are that they need a dash. Of course, now you can become super-creative ... if you build an auto parts warehouse with parts lists and serial numbers:

 <ul> <li> <auto-part> <serial-number>AQ12345</serial-number> <short-description>lorem ipsum dolor...</short-description> <list-price>14</list-price> </auto-part> </li> </ul> 

You cannot get much more semantic than that!

However, there is a chance that I went too far in semantic-shangri-la-la (the real place), and I might be tempted to change it to something more general:

 <ul> <li class='auto-part' data-serial-number="AQ12345"> <p class='short-description'>lorem ipsum dolor...</p> <p class='list-price'>14</p> </li> </ul> 

Or perhaps this (if I needed to style and show the key visually)

 <ul> <li class='auto-part'> <x-key>AQ12345<//x-key> <p class='short-description'>lorem ipsum dolor...</p> <p class='list-price'>14</p> </li> </ul> 

Answer 9

I like Unicron's idea of ​​putting them all on the same line, but another option is to put the value below the definition name:

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

This method may be a little easier on the eyes in ridiculously long definitions (although if you use ridiculously incorrect definitions, then perhaps the list of definitions is not what you really want in the end).

As for rendering on the screen, the lower fat field applied to dd is a great visual separation.

Answer 10

How easy is it to place an empty line between each pair?

This does not require special handling for long values.

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

Answer 11

How about using lists?

ordered:

 <ol> <li title="key" value="index">value</li> … </ol> 

Or use <ul> for an unordered list and skip the value="index" bit.

Answer 12

Line from spec :

The default value groups can be terms and definitions, topics and metadata values, questions and answers, or any other name value data groups.

I assume the use of the <dl> , <dt> and <dd> elements.