Question

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

e.g：

<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）相同-但是为了提高认识并教育代码使用语义正确的元素-<如此处所述，strong> figure 和相关的 figcaption 是最好的工具。

这里是文档的链接，所有brwesers（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>

将<label>用于非输入/非交互元素是一种好习惯吗？

2 个答案: