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

场景如下:

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

谢谢

【问题讨论】:

  • 我认为,没有&lt;dl&gt; 的简单&lt;table&gt; 在语义上是合适的。
  • 你可以在这里为语义争论这种情况。至少,正如@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 中

【讨论】:

  • 否决选民愿意评论我如何改进答案或评论他们的问题?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-04-16
  • 1970-01-01
  • 2020-11-01
  • 1970-01-01
  • 1970-01-01
  • 2017-04-30
相关资源
最近更新 更多