标签标签语义

Question

我读过this，我通常用跨度或强度来描述“文本标签”。对于最佳实践，这是真的吗？这似乎也是一种语义方式，但为什么它仅限于表单元素？

如果我想这样显示信息，该怎么办：

Name: FOo Bar
Age: 27
Weight: 151 kg

等?

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

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

但是一般来说，对于不属于输入字段的标签，也应该有一个标签。因为这可能有点主观，所以我不介意把它变成一个社区维基之类的东西

Answer 1

您应该使用definition list (带有dt和dd的dl)：

<dl>

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

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

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

</dl>

该规范规定，它可以用于

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

我认为(带有th的) table也可以使用。但只有当我想比较几个人时，我才会使用它，而不仅仅是列出一个人的数据。

Answer 2

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

span标记没有语义含义，无论添加到它的id或类是什么，也不管它是在什么上下文中使用的。使用span不会在语义上获得任何好处(尽管它没有坏处)。

strong标记具有一般含义(此内容具有额外的重要性)，它不会随使用它的上下文而变化。当没有其他更合适的东西时，它有时会很有用。

在这种情况下，定义列表(由@unor建议)似乎是可行的。如果需要高级样式，请将每个名称-值对放入单独的定义列表中(这在语义上可能比较笨拙，但它允许在设计内容样式方面有更大的灵活性)。

Answer 3

我猜如果你想做到100%的语义正确，你就必须将标签与禁用的或只读的文本框结合使用，这些文本框的样式看起来有点不同。