【问题标题】:Label Tag semantics标签标签语义
【发布时间】:2012-08-11 23:17:39
【问题描述】:

我读过this 并且我通常使用跨度或强项来描述“文本标签”。最佳实践是否如此?好像也是一种语义的方式,但是为什么只限于表单元素呢?

如果我想这样显示信息怎么办:

Name: FOo Bar
Age: 27
Weight: 151 kg

等等?

姓名、年龄和体重都可以用标签来描述,但由于它们所描述的项目不是输入标签,所以它在语义上是不正确的(至少对于 html 和 w3c 而言)。我通常使用

<span class="label"> or <span class="description"> or <span class="person-detail"> etc

但通常还应该为与输入字段不相关的标签添加一个标签。由于这可能有点主观,我不介意将其变成社区 wiki 或其他东西

【问题讨论】:

标签: html semantic-markup


【解决方案1】:

您应该使用definition listdl@987654322@@987654323@):

<dl>

 <dt>Name</dt>
 <dd>FOo Bar</dd>

 <dt>Age</dt>
 <dd>27</dd>

 <dt>Weight</dt>
 <dd>151 kg</dd>

</dl>

规范声明它可以用于

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


我认为也可以使用table(与th。但我只会在我想比较 几个 人时使用它,而不仅仅是列出一个人的数据。

【讨论】:

    【解决方案2】:

    我会避免使用label 标记,除非它与功能性 HTML 表单(带有可编辑字段)结合使用;否则,使用它可能会在语义上造成混淆。

    span 标记没有语义意义,不管添加到它的 id 或类,也不管它使用的上下文。使用span 不会在语义上获得任何好处(尽管它没有害处)。

    strong 标记具有通用含义(此内容具有额外的重要性),不会因使用它的上下文而异。当没有其他更合适的时候,它有时很有用。

    在这种特殊情况下,定义列表(如@unor 所建议的)似乎是要走的路。如果需要高级样式,请将每个名称-值对放入单独的定义列表中(这在语义上可能会很尴尬,但它可以为内容样式设置更大的灵活性)。

    【讨论】:

      【解决方案3】:

      我想如果您想在语义上 100% 正确,则必须将标签与禁用或只读文本框结合使用,这些文本框的样式看起来有点不同。

      【讨论】:

      • 我认为禁用的文本框甚至不应该仅用于显示目的。只有 id 有理由禁用它...对吗?
      • 您可以将其设为只读。了解屏幕阅读器如何应对并将其用作您的标准可能是一个更好的主意。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-10-10
      • 2014-04-03
      • 1970-01-01
      • 1970-01-01
      • 2013-02-24
      • 2018-01-05
      • 2020-08-07
      相关资源
      最近更新 更多