我可以使用 <dl> 来显示输入、选择、..吗？答案

【问题标题】：Can I use <dl> to display input, select,..?我可以使用 <dl> 来显示输入、选择、..吗？
【发布时间】：2015-07-15 01:18:00
【问题描述】：

场景如下：

如果都是文本，那么我会使用所有 dl 标签。但是，有一些输入、复选框、下拉列表。使用 dt 和 dd 是语义吗？如果不是，什么标签最合适？

谢谢

【问题讨论】：

我认为，没有<dl> 的简单<table> 在语义上是合适的。
你可以在这里为语义争论这种情况。至少，正如@Oriol 指出的那样，它是有效的 HTML。对我来说，我认为它在语义上足够接近。语义与其说是规则，不如说是指导方针。我会说从语义上讲，您的列表比表格更多。

标签： html semantics

【解决方案1】：

dl elements 的content model 是

零个或多个组，每个组由一个或多个 dt 元素组成后跟一个或多个 dd 元素，可选地与 script-supporting elements.

dt elements的内容模型是

Flow content，但没有header，footer， sectioning content，或heading content后代。

dd elements的内容模型是

Flow content.

Flow content 包括 input 和 select 元素（等等）。

所以是的，这是允许的。

【讨论】：

仅仅因为它是有效的，并不能使它成为语义。我对这个语义持怀疑态度。
那么，如果
中有输入，我是否必须为其添加标签才能访问？不过对我来说没有语义。
我不想在这里劫持@Oriol，但是是的，您应该有一个标签，从技术上讲，对于每个输入，这将使“覆盖当前策略”变得有趣。但是，label 可以进入dt，for 属性会将其与相应的输入相关联。
@LongNguyen 我认为label 可以更明确地说明dt 中的文本与dd 中的input 之间的关系。但是，这并不是完全必要的，因为dl 已经关联了它们。

【解决方案2】：

语义可能有很多灰色区域，通常可以归结为解释。严格来说，您没有定义列表，但可以这样解释。

您可以查看的一个选项是直接列表：

<ul class="meaninfulClassNameHere">
   <li>
      <span class="label">Blah</span><span class="value">Blah<span>
   </li>
   <li>
      <label for="someInputID" class="label">A Label</label>
      <span class="value">
           <select id="someInputID></select>
   </li>
</ul>

它也可能比dl更灵活

更新

然而刚刚阅读：http://html5doctor.com/the-dl-element/，在 HTML5 中 dl 是一个描述列表。它引用了W3C spec：

dl 元素表示一个由零或组成的关联列表更多名称-值组（描述列表）。名称-值组由一个或多个名称（dt 元素）后跟一个或多个值（dd 元素），忽略除 dt 和 dd 之外的任何节点元素。在单个 dl 元素中，不应超过每个名称一个 dt 元素。

名称-值组可以是术语和定义、元数据主题和值、问题和答案，或任何其他名称-值数据组。

您所拥有的是有效的名称/值对，即使它在输入中表示的某些数据也是如此。

请记住，您也可以将label 放在dt 中

【讨论】：

否决选民愿意评论我如何改进答案或评论他们的问题？