【发布时间】：2011-09-24 01:19:28
【问题描述】：
标签和字段很简单；我们有<label>，然后是相关的输入字段。但是，对于该字段下的较小信息文本，最语义正确的 HTML 元素是什么？
【问题讨论】：
【发布时间】：2011-09-24 01:19:28
【问题描述】：
我不知道连接它们的特定元素或属性，但您可以使用 ARIA 属性aria-describedby：
<label for="firstname">First Name</label>
<input type="text" id="firstname" aria-describedby="firstname-explanation" />
<p id="firstname-explanation">e.g. John</p>
但包括 label 中的所有内容对我来说似乎也不错（也提供了很好的样式能力，因为你有一个语义容器）：
<label>
<span class="form-item-title">First Name</span>
<input type="text" id="firstname" />
<span class="form-item-description">e.g. John</span>
</label>
或者您甚至可以将两者混合。
另一种方法是将描述放在input 元素的title（或@Alohci 建议的placeholder）属性中（语义上这是描述它的那个），但在这种情况下，你有通过 Javascript（或使用input:after { content : "e.g. " attr(placeholder) } 的 CSS - @Alohci 建议）将其插入到标记中。
【讨论】：
-
这可行。我会先等待一段时间，看看是否有任何 HTML 专家对元素具有百科全书式的知识，可以在我将其标记为正确之前给出明确的答案。
-
aria- describeby 是一个勇敢的尝试，但它有几个问题。首先，HTML5 规范明确指出 aria 属性只是向浏览器指示浏览器应如何向平台的可访问性 API 公开内容，并且它们本身并不传达语义信息。其次，例子不是描述。一个理想的语义解决方案可能是使示例占位符属性并将它们的样式设置在问题中描述的输入框之外，但这是为了未来，而不是现在。现在，我将使用第二个
<label for="">元素。 -
@Alohci 我同意你所说的大部分内容。虽然有时你可以用一个例子来最好地描述一些东西（
placeholder仍然是一个有效的想法，但与这里的title有同样的问题）。为了获得最佳效果，我仍然会在整个过程中使用一个label，而不是您建议的 2labels（这是完全有效的）。 -
@bazmegakapa - 同意。我不确定是否需要 javascript。我想到了类似的东西，在 css 中：
input:after { content : "e.g. " attr(placeholder) }。这可能会通过额外的定位 css 来解决问题。 -
@Nathan 在官方HTML4 spec about
label中：To associate a label with another control implicitly, the control element must be within the contents of the LABEL element.HTML5 spec 也是这么说的。