Html 使用<；标签>；对于非输入/非交互元素？

当标记一个没有交互作用的非输入元素时，例如预览

，使用

而不是

是否更好（或正确）

e、 g:

图像预览：

或者这个：

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

图像预览：

标签定义了

元素的标签

因此，请改用

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

---

HTML规范不强制要求将标签与控件关联，但Web内容可访问性指南（WCAG）2.0却强制要求将标签与控件关联。技术文档中对此进行了描述，其中还解释了隐式关联（通过嵌套，例如标签内的输入）没有通过for和id属性的显式关联得到广泛支持，

我知道这是一个老问题，已经得到了回答和接受-我的解决方案与其中一条评论（@Quentin）相同-但为了提高意识并教育代码使用语义正确的元素，图和相关的figcaption是此处所述工作的最佳工具

这里是一个文档链接，fugure元素作为html5元素在所有浏览器（）中都得到了充分支持

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

图{
文本对齐：居中；
}
菲卡普顿{
利润底部：4倍；
颜色：蓝色；
字体大小：粗体
}
图img{
边框：纯色1px蓝色；
边界半径：8px；
}

图像预览：

Figure/figcaption可能比span更好，但您认为使用标签是完全错误的（由于HTML规范要求它与表单控件关联，因此无效）（尽管textareas和select可以，但它不必是输入））.我以前没有听说过标签的隐式关联不如显式关联得到很好的支持，所以我决定跟进。我想你指的是。注释中描述了这是用IE 6.0在Windows XP上测试的。这太过时了。我想看看是否有更多关于这方面的最新信息。>“HTML规范并不强制要求将标签与控件相关联，但Web内容可访问性指南（WCAG）2.0确实如此。"在我看来，链接文档主要是说，当您有一个表单控件时，它也应该始终有一个关联的标签，但它没有提到任何与此相反的情况，即有一个

元素而没有关联的表单控件，因此不会自动要求反之亦然。需要标签的表单控件并不意味着标签始终需要表单控件。"

label

元素表示用户界面中的标题。标题可以与特定的表单控件相关联，称为

label

元素的标签控件，可以使用

for

属性，也可以将表单控件放在

label

元素本身内。除非另有规定，b根据以下规则，标签元素没有标签控件。“语义标记如何？在屏幕上提供文本（没有关联控件）时，使用范围如何优于使用标签元素？”。我同意这里的一些评论，规范指出标签可以通过for属性与输入关联，但我不认为这意味着标签必须有关联的输入控件。希望WAVE也这样看待它。他们规则的编写方式让我们感到悲伤。

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