对 non-input/non-interactive 元素使用 <label> 是好习惯吗？

Question

当标记一个没有交互性的非输入元素时，例如预览 <img>，使用 <span> 比 <label> 更好（或更正确）吗？

例如：

<span>Image preview:</span>
<img id="preview">

或者这个：

<label for="preview">Image preview:</label>
<img id="preview">

Answer 1

<label> 标签定义了 <input> 元素的标签。

所以请改用<span>。

for 属性将标签与控制元素相关联，如 HTML 4.01 规范中标签描述中所定义。这意味着，除其他事项外，当标签元素获得焦点（例如通过单击）时，它会将焦点传递给其关联的控件。标签和控件之间的关联也可以由基于语音的用户代理使用，这可以让用户在处理控件时询问关联的标签是什么。（关联可能没有视觉渲染那么明显

HTML 规范并未强制要求将标签与控件相关联，但 Web 内容可访问性指南 (WCAG) 2.0 做到了。这在技术文档 H44: Using label elements to associate text labels with form controls 中有描述，它还解释了隐式关联（通过嵌套，例如在标签内输入）不像通过 for 和 id 属性的显式关联那样得到广泛支持，

Answer 2

我知道这是旧的并且已经得到回答和接受 - 我的解决方案与其中一条评论 (@Quentin) 相同 - 但为了提高认识和教育代码使用语义正确的元素 - figure 和关联的 figcaption 是完成此处所述工作的最佳工具。

这是一个 link 文档，所有浏览器 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) 都完全支持 fugure 元素作为 html5 元素。

figure 元素的所有部分都可以设置样式 - figcaption 可以是 hte figure 元素的第一个子元素或最后一个子元素（- 将其放在图像之前或之后）

figure {
  text-align: center;
}

figcaption {
  margin-bottom: 4px;
  color: blue;
  font-weight: bold
}

figure img {
  border: solid 1px blue;
  border-radius: 8px;
}

<figure>
  <figcaption>Image preview:</figcaption>
  <img id="preview" src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" alt="fluffy-kitten" height="100" />
</figure>

对 non-input/non-interactive 元素使用 <label> 是好习惯吗？

Is it good practice to use <label> for non-input/non-interactive elements?

html

label

input