名称 - 值对的语义和结构 [英] Semantics and Structure of Name-Value Pairs

问题描述

这是我一直在努力的一个问题。什么是标记名称/值对的正确方法？

我喜欢< dl>元素，但它提出了一个问题：没有办法将一个对从另一个 - 它们没有唯一的容器。在视觉上，代码缺乏定义。从语义上讲，我认为这是正确的标记。

 < dl> 
< dt> Name< / dt> 
< dd>值< / dd> 
< dt> Name< / dt> 
< dd>值< / dd> 
< / dl> 
  

在上面的代码中，很难在代码和呈现中正确地偏移对。如果我想，例如，但每一对之间的边框，这将是一个问题。

我们可以指向表。可以认为名称 - 值对是表格数据。这似乎不正确，但我看到了这个论点。但是，除了位置或添加类名之外，HTML不区分名称和值。

  ; table> 
< tr> 
< td>名称< / td> 
< td>值< / td> 
< / tr> 
< tr> 
< td>名称< / td> 
< td>值< / td> 
< / tr> 
< / table> 
  

从视觉的角度来看，这在代码和CSS中都更有意义。为上述边框设计样式是微不足道的。

想法，评论，问题？

strong> Edit / Update
也许这是我应该在结构中明确提到的东西，但是一个定义列表还有一个问题，就是没有语义分组对。很容易理解 dd 和 dt 之间的顺序和隐式边界，但是它们对我来说还是有些偏差。

解决方案

感谢这个有趣的问题。这里还有很少的事要考虑。

什么是配对？两个元素在一起。所以我们需要一个标签。
假设它是 pair 标签。

  pair>< / pair> 
  

对包含键和相应的值：

 < pair>< key> keyname< / key>< value> value< / value>< / pair&然后，我们需要列出这些对：
 
 
 < pairlist> 
< pair>< key> keyname< / key>< value>值< / value>< / pair& 
< pair>< key> keyname< / key>< value>值< / value>< / pair& 
< / pairlist> 
  
接下来要考虑的是显示对。 
通常的布局是表格式：
 键值
键值
  
和可选分隔符，通常为冒号：
  key：value 
 key：value 
  
冒号可以很容易通过CSS添加，但这当然不会在IE中工作。
 
 
 
上面描述的情况是理想的。 
 
 
 
 
 
 
总结：
 
 
 
  dl 在语义上最接近，对于键和值的简单情况，但是很难应用视觉样式
显示内联对或将红色边框添加到刚好悬浮的对）。最适合 dl 的情况是词汇表。但是这不是我们讨论的情况。
 
 
 
在这种情况下，我可以看到的唯一的选择是使用 table  ，像这样：
 < table summary =这是键和值对> 
< caption>关于语义的一些注释< / 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> 
  
一个：
 < ul> 
< li>< strong>键< / strong>值< / li> 
< li>< strong>键< / strong>值< / li> 
< / ul> 
  
或：
 code>< ul> 
< li>< b>键< / b>值< / li> 
< li>< b>键< / b>值< / li> 
< / ul> 
  
或者，当键可以链接时：
 < ul> 
< li>< a href =/ key1> key1< / a>值< / li> 
< li>< a href =/ key2> key1< / a>值< / li> 
< / ul> 
  
键和值对通常存储在数据库中，通常存储表格数据$ b $ 
 
 
 $ b 
你觉得怎么样？
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.
解决方案
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?

                        
这篇关于名称 - 值对的语义和结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！