当标记一个没有交互性的非输入元素时，如预览<img>，使用<span>代替<label>更好(或正确)吗?
例如:
<span>Image preview:</span>
<img id="preview">
或:
<label for="preview">Image preview:</label>
<img id="preview">
<label>标签为<input>元素定义了一个标签。
所以用<span>代替。
for属性将标签与控制元素关联起来，正如HTML 4.01规范中label的描述中所定义的那样。这意味着，当label元素接收焦点时(例如，通过点击)，它将焦点传递给其关联的控件。标签和控件之间的关联也可以由基于语音的用户代理使用，这可以让用户在处理控件时询问关联的标签是什么。(这种关联可能不像在视觉渲染中那么明显。
HTML规范没有强制要求将标签与控件关联起来，但是Web内容可访问性指南(WCAG) 2.0做到了这一点。这在技术文档H44中有描述:使用标签元素将文本标签与表单控件关联，这也解释了隐式关联(通过嵌套，例如在标签内输入)不像通过for和id属性显式关联那样得到广泛支持，
我知道这是一个古老的问题，已经得到了回答和接受-我的解决方案与其中一个评论(@Quentin)相同-但是为了提高意识和教育代码使用语义正确的元素- 图和相关的图标题是这里描述的工作的最佳工具。
这是一个文档链接，所有浏览器都完全支持图形元素作为html5元素(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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>
使用<label>元素作为非输入标签的标题是完全可以接受的。
HTML生活标准
根据HTML生活标准的label元素部分，label元素可以选择性地与表单控件关联，但这不是必需的。
label元素表示用户界面中的标题。标题可以与特定的表单控件相关联，即label元素的标签控件，可以使用for属性，也可以将表单控件放在label元素本身中。除非下列规则另有规定，否则
label元素没有标记控件。
特别注意，除了说明标题"可以与…形成control"(而不是"must ")，文档还明确声明:
除非下列规则另有规定，
label元素没有[与标题相关联的特定表单控件]。
似乎只有在元素打算与关联输入或不关联输入一起使用时才有意义。考虑到label作为内容标题的语义意义，这是有意义的——不仅仅是输入可以拥有并受益于标题。
WCAG H44反对意见
表明label元素应该只在input上使用的来源经常引用WCAG 2+的输入有标签的要求，以及WCAG技术H44:使用标签元素将文本标签与表单控件关联，这呈现了一个满足规范的示例模式。
这不是强制使用label元素，这样解释是误读。
WCAG自己在关于技术页面上指出，技术是非规范的:
不需要技术
技术是信息性的——这意味着它们不是必需的。确定是否符合WCAG 2.1的基础是来自WCAG 2.1标准的成功标准，而不是技术。
H44技术的目的是实现或帮助实现四个WCAG 2+成功标准，涉及:
- 非文本内容的文本替代(SC 1.1.1)
- 为视觉传达的信息提供对等文本(SC 1.3.1)
- 为用户输入提供标签或说明(SC 3.3.2)
- 提供能够跟踪和操纵用户输入控件的辅助技术(SC 4.1.2)
最终，上述技术和标准旨在帮助可访问性- 而不是规定label元素仅用于用户输入。