名值对的语义和结构

Question

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

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

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

在上面的代码中,很难在视觉上和代码中正确地偏移对.例如,如果我想,但每对的边界,这将是一个问题.

我们可能会指向表格.可以说,名称 - 值对是表格数据.这似乎对我不正确,但我看到了这个论点.但是,除了位置或添加类名外,HTML不会将名称与值区分开来.

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

从视觉角度来看,这在代码和CSS中都更有意义.设计上述边界是微不足道的.然而,如上所述,语义最多是模糊的.

想法,评论,问题？

编辑/更新 也许这是我应该在结构方面明确提到的,但是定义列表也存在不对语义进行分组的问题.a dd和a 之间的排序和隐含边界dt很容易理解,但它们对我来说仍然感觉有些偏差.

Answer 1

谢谢你这个有趣的问题.这里还有很多事情需要考虑.

什么是一对？两个元素在一起.所以我们需要一个标签.让我们说它是pair标签.

 <pair></pair>

该对包含密钥和相应的值:

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

然后,我们需要列出对:

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

接下来要考虑的是对的显示.通常的布局是表格式:

key value
key value

和可选的分隔符,通常是冒号:

key : value
key : value

冒号可以通过CSS轻松添加,但这肯定不适用于IE.

上述案例是理想的案例.但是没有有效的HTML标记可以轻松适应这种情况.

总结一下:

dl在语义上最接近,对于键和值的简单情况,但很难应用视觉样式(例如,显示内联对或为刚刚悬停的对添加红色边框).最适合的案例dl是词汇表.但这不是我们讨论的情况.

我在这种情况下可以看到的唯一选择是使用table,如下所示:

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

多一个:

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

要么:

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

或者,当钥匙可以链接时:

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

键和值对通常存储在数据库中,而这些通常存储表格数据,因此表格最适合恕我直言.

你怎么看？

Answer 2

XHTML 2引入了使用该di元素对术语和定义进行分组的功能

<!-- 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与XHTML 2>对定义列表的增强

不幸的是,XHTML 2已经死了,HTML5没有 di元素

所以,你可以结合ul > li使用dl > dt + dd:

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

Answer 3

继规范（和进一步的细节由亚历山大安东诺夫提供）：使用dl，dt，dd，和任选的div。

的组合dl，dt和dd在语义罚款键-值对：

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

为了简化样式设置或解析，div可以将s用作dl组合键值对的子项（以及dt并dd成为的子项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>

Answer 4

我认为定义列表可能是一个坏主意.从语义上讲,它们用于定义.其他键值列表通常与定义标题和说明不同.

A table是一种方法,但无序列表怎么样？

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

Answer 5

dl {
  display: grid;
  grid-template-columns: auto auto;
}

dd {
  margin: 0
}

<dl>
  <dt>key</dt>
  <dd>value</dd>
  <dt>key</dt>
  <dd>value</dd>
</dl>

我用<dl> <dt> <dd>网格使用和样式化它们